Vertical List Menu

Posted by Jmz in CSS Tutorials on 11 8th, 2007 |

I used to find it hard to find a list menu that was compatible with all the browsers I use without having to use any CSS hacks that’s why when I created this one I decided to keep it and use it as my standard list menu, that way I only have to change certain aspects of the styling to make it look how I want it to look.
First of all we’ll do the HTML for the list menu, this will simply be:

And that’s it as far as the HTML for our list goes, if you’re confused now you might want to do some more reading on HTML. You can see the list so far Here. As you can see, it’s nothing special yet!
Now we’ll move onto the CSS. You might have noticed that our listmenu was inside a class called “listmenu” that’s simply so we can reuse the list menu as many times as we want on a single page, while using an ID would only let us use it once.
Here’s the code for the listmenu class:

.listmenu ul {

margin: 0 0 5px 0;

padding: 0 0 2px 0;

list-style-type: none;width:185px;}

All I have done here is added a little bit of padding and margin to space the whole list out from the side of the page, you can change this to whatever you need to make it fit your layout. I also added a width, pretty obvious what that does :p and a “list-style-type: none;” that will remove the bullet points from the end of the list. You can see what the whole list looks like now if you go Here. As you can see, there’s still some work to do!
Next we’re going to add the CSS to style the list item, this will only work on list items that are hyperlinked like the ones in the HTML code posted above. The code for the list item looks like this:

.listmenu li a {

color: #333;

display: block;

border-left:3px solid #666;

border-right:3px solid #666;

height: 16px;

padding: 4px 0 4px 14px;

text-decoration: none;

font-weight:bold;

background-color:#fff;}

The display:block; makes your browser put each list item on a new line rather than all on one line. The two borders simply add a 3px #666 border to either side of our list menu, they’re just there to make it look a bit nicer :p. The rest of the CSS is pretty self explanatory.

Here I added some extra CSS code:

html{

font:12px Arial, Helvetica, sans-serif;

color:#333;

padding:0;

margin:0;}

All the above code does is sets a font face, size and colour for the page to tidy it up a bit.

As you can see here the menu is starting to take shape now, all we need is a nice rollover effect.

To add the rollover we use this CSS:

.listmenu li a:hover {

background-color: #666;

color:#fff;}

All this does is change the background colour to #666 and the font colour to #fff when you put your mouse over it. If you take a look here you will see our list menu is complete! I’ll post the full code for the finished menu at the bottom of he page incase you get stuck.

If you liked this tutorial, please consider letting me know by posting a comment, and if you like RSS Feeds and tutorials like this, please sign up for my RSS Feed.

Vertical List Menu: