Vertical menus are almost a must on websites. But I always get tired of making the images of the menu and then trying to get the hover just right so that it works on all browsers like I posted earlier. But fret no more! I’ll show you a nice little, all CSS way to making a stylish vertical menu.

All you need to do is basically give <a></a> tags a constant width and a background color.

Like so:

#menu
{
    float:left;
}
#menu a
{
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 3px;
    width: 160px;
    background-color:#333333;
    border-bottom: 1px solid #eee;
    border-left:3px solid #00CCFF;
}

Explanation

The most important thing about this CSS is the display: block. If this wasn’t there, the width of each link will only be as wide as the text.

I also added borders to give it a better look.

Next, to give it an even better look, we’re going to change the background whenever the cursor hovers over the link. We do this like we would when adding text-decorations when hovering over a link.

Add this:

#menu a:hover
{
    background-color: #00CCFF;
    color: #000;
}

This last step is optional if you want to let your visitor know which page they are currently on. I chose to just change the border color on the left. Of course, you can change the background color or add more borders or something.

And this:

#menu a#selected
{
    border-left:3px solid #CCC;
}

Now to put it all together:

<style type="text/css">
#menu
{
    float:left;
}
#menu a
{
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 3px;
    width: 160px;
    background-color:#333333;
    border-bottom: 1px solid #eee;
    border-left:3px solid #00CCFF;
}
#menu a:hover
{
    background-color: #00CCFF;
    color: #000;
}
#menu a#selected
{
    border-left:3px solid #CCC;
}
</style>

<div id="menu">
    <a href="menu1.html">menu1</a>
    <a href="menu2.html" id="selected">menu2</a>
    <a href="menu3.html">menu3</a>
</div>

Finally, the end product:

You can also use background images instead of colors for your link backgrounds. The possibilities are endless!