Free web tools

Easy vertical menus

Navigation is a core part of any website and CSS can allow you to create quick, easy and most importantly usable navigation menus for your website. In this tutorial we will create a vertical menu with simple hover effects.

The basics

First step is to start with the basic HTML. We'll be using an unordered list:

<ul class="menu">
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Products</a></li>
     <li><a href="#">Support</a></li>
     <li><a href="#">Contact</a></li>
</ul>

Which gives us something like this:

• Home
• About
• Products
• Support
• Contact

Next step is to add a bit of CSS to the list element. We want to remove all margin and padding - which is added by many browsers by default. We'll also remove the list style and add a fixed width.

ul.menu {
     list-style:none;  /* removes bullets */
     margin:0;        
     padding:0;
     width:200px;
}

Here is what our list now looks like:

• Home
• About
• Products
• Support
• Contact

Next we'll work on the list items. We'll again remove the margin and add a 1 pixel padding to the bottom of each item:

ul.menu li {
     padding:0 0 1px 0;    /* adds 1 pixel padding to bottom */
     margin:0;
}

Here is the list now - not much difference but the reason for the 1 pixel padding will become apparent in the next section.

• Home
• About
• Products
• Support
• Contact

Styling the links

Now we have the list and list items complete we can work on styling the links, the CSS code is shown below this explanation. We'll firstly set the display type to block - meaning the link acts as a "block box" and will expand to the full width of the 200 pixel wide list. Next we'll add a thick border to the left, this is simply for aesthetic purposes. We use background-color and color to alter the colours of the links, text-decoration:none; removes the underline. Lastly the padding property adds 5 pixels of space above and below the link text and 10 pixels either side.

ul.menu li a:link, ul.menu li a:visited {
     display:block;
     border-left:10px solid #5B0000;
     background-color:#9E0000;
     color:#ffffff;
     text-decoration:none;
     padding:5px 10px;
}

The 1 pixel padding on the parent list item splits the menu items nicely:

• Home
• About
• Products
• Support
• Contact

Hover effects

Lastly we add the hover effects, in this example we'll simply change the background colour to match that of the left hand border:

ul.menu li a:hover {
     background-color:#5B0000;
}

And our menu is complete:

• Home
• About
• Products
• Support
• Contact

So our final code is:

<style type="text/css">
ul.menu {
     list-style:none;  /* removes bullets */
     margin:0;        
     padding:0;
     width:200px;
}
ul.menu li {
     padding:0 0 1px 0;    /* adds 1 pixel padding to bottom */
     margin:0;
}
ul.menu li a:link, ul.menu li a:visited {
     display:block;
     border-left:10px solid #5B0000;
     background-color:#9E0000;
     color:#ffffff;
     text-decoration:none;
     padding:5px 10px;
}
ul.menu li a:hover {
     background-color:#5B0000;
}
</style>
<ul class="menu">
     <li><a href="#">Home</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Products</a></li>
     <li><a href="#">Support</a></li>
     <li><a href="#">Contact</a></li>
</ul>

Taking it a step further

The following three examples build upon the above code by adding background images and further border effects.