iDrone reprint: How to Make a CSS Menu Bar

[This is an iDrone reprint, written by Mark W sometime in 2006; I'm posting it now because I finally got the syntaxhighlighter tool working]

Last week, a friend of mine asked how I made the CSS menu bar on my blog. Though it may seem a bit daunting to those who haven’t been using style sheets, it’s actually very simple. First, I made a list in my HTML:

<div id=”menu”>
 <ul id=”navlist”>
   <li><a href=”/”>Home</a></li>
   <li><a href=”/chinese-tools”>Tools</a></li>
   <li><a href=”/archives”>Archives</a></li>
 </ul>
</div>

Notice that I put the list inside <div> tags. That’s important. It’s also important that the <div> block and the <ul> have IDs, “menu” and “navlist”, in this case. After adding the above to my HTML, I had to add the following to my style sheet:

 /* Horizontal Menu */
#menu {
         height: 20px;
     margin: 0px 0px 6px;
     background: #eec;
}

ul#navlist {
     margin: 0px -15px 6px -15px;
     padding: 0px;
     white-space: nowrap;
     font-weight: bold;
}

#navlist li {
     display: inline;
     list-style-type: none;
     float: left;
     padding: 0px 0;
}

#navlist a {
     padding: 5px 12px;
}

#navlist a:link, #navlist a:visited {
     color: #246;
     background-color: #eec;
     text-decoration: none;
}
#navlist a:hover {
     color: #fff;
     background-color: #369;
     text-decoration: none;
}

The #menu portion just sets the height and background of the menu, the ul#navlist aligns the list to fit nicely with my layout, #navlist a determines how much space is between each item in my menubar, and #navlist a:hover is what causes the color and the background of each link to change when you hover your mouse over them. Voila, a navigation menu that changes colors when your mouse is over it. Best of all, there’s no Javascript involved. Idrone also uses a very similar CSS menu bar.