A great free tool for making attractive menus is the List-U-Like CSS Generator “Create cross-browser list-based navigation bars with ease”.
Begin with the pre-designed menu bars in the Load Settings section.
In the Navbar Positioning section, "Fixed" gives you a menu that stays in the same place as the page scrolls—very helpful as you design the menu . "Absolute" goes in the exact coordinates you specify on the browser window. "Relative" gives a menu that is positioned where it would be on the page normally, depending on where it is in the HTML.
Experiment with using different colors from the Color Schemer, as backgrounds for the buttons. Put the color code (# symbol followed by 6 numbers or letters) in the background: field, in the Unvisited, Rollover, and Visited sections.
In the Link Boxes section, specify Margins (px) as 5 to 20. This gives some blank space between items.
Click on any Save button to see the example navigation bar change.
The Color section is where you specify the text color.
If you need to make the buttons wider or narrower, adjust the value in the Navbar Positioning, Width (when vertical) field. 9em is a good value to start with.
You may want to leave all the other settings alone, to keep things simple. If you want to experiment, you can always click on Generate Config and copy the result to a Notepad so you can go back to it if needed (paste it in the Input Configuration section).
In the Output Settings section, put a checkmark by "fonts and colors separately" and by "add whitespace for readability".
Click on Generate CSS and paste the results into your style sheet.
To use the Style Sheet Generator with a List-U-Like menu, replace style lines with these:
background:#<?=$menubg?>;
color:#<?=$menulink?>;
font-family: <?=$sansfont?>;
border-color: <?=$borders?>;Inside the a:hover style, use these:
background:#<?=$linkhoverBG?>;
color:#<?=$linkhoverFG?>;Inside the a:visited style, use these:
background:#<?=$menubg?>;
color:#<?=$linkvisited?>;Inside the a:active style, use these:
background:#<?=$menubg?>;
color:#<?=$$linkactive?>;Then paste these into the section of the style sheet generator script for lul (or lulv for vertical menus).
View the source of the List-U-Like Generator page to see how to define the text and links for your menu.
Here are the settings for a nice menu I used for a site that had #A56ABE as it's base color. Paste this into the "paste generated config:" section of the List-U-Like Generator.
/* LUL1.0 :: Configuration data [Created: Sat Jul 19 2008 00:05:56
GMT-0700 (Pacific Daylight Time)] :: http://www.listulike.com/ */
var um={
"baseSRC":"",
"orientation":["horizontal","left","top","fixed","15px","15px","1000"],
"hstrip":["#393939","no"],
"navbar":["","","9em"],
"items":["10","1","collapse","#ead4a4
#edbb85 #edbb85 #ead4a4","solid","#ead4a4 #ead4a4 #fae4b4 #fae4b4","solid","#ead4a4
#edbb85 #edbb85 #ead4a4","solid","9","5","#5c2776","#5c2776","#5c2776","75%","tahoma,sans-serif","bold","none","left","#EFC7FF","#009699","#e8c8f5","normal","italic","italic","letter-spacing:1px
!important;","","","none","","",""]
};