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 class="home"><a href="/">Home</a></li>
<li class="tools"><a href="/chinese-tools">Tools</a></li>
<li class="archives"><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. The individual list items don’t need to have classes, though. 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.