Dynamic Drive CSS Library- Vertical Divider Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Vertical Divider Menu

Author: Dynamic Drive

One of the most popular CSS menu interfaces around, this is a horizontal CSS menu that uses an indented vertical divider to separate each menu item. Each item can change background color when the mouse moves over it.

Demo:

The single image used:

The CSS:

<style type="text/css">

#vdividermenu ul{
margin: 0;
padding: 0;
margin-bottom: 1em;
float: left;
font: bold 100% Tohoma;
width: 100%;
border: 1px solid #625e00;
background-color: #f9ff91;
}

* html #vdividermenu ul{ /*IE only rule, reduce menu width*/
width: 99%;
}

#vdividermenu ul li{
display: inline;
}

#vdividermenu ul li a{
float: left;
color: black;
padding: 2px 12px;
text-decoration: none;
background: transparent url(media/vertical.gif) center right no-repeat;
}

#vdividermenu ul li a:visited{
color: black;
}

#vdividermenu ul li a:hover{
color: black;
background-color: #ffe84f;
}

</style>

The HTML:

<div id="vdividermenu">
<ul>
<li><a href="http://www.dynamicdrive.com" title="Home">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" title="CSS Examples">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New">New</a></li>
<li id="current"><a href="http://www.dynamicdrive.com/revised.htm" title="Revised">Revised</a></li>
<li><a href="http://tools.dynamicdrive.com" title="Tools">Tools</a></li>	
<li><a href="http://www.dynamicdrive.com/forums/" title="DHTML Forums">Forums</a></li>
</ul>
</div>

Code Info

Rate this code:

Date Posted: 06/07/2006

Revision History: None

Usage Terms: Click here

Your Comments (24)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 3 pages 1 2 3 >

I like this menu because it's clean and VERY easy to customize. It is also a quite impressive use of no tables.

*I recommend this menu.

Posted by Nathan on 06/08, 05:27 AM

Am I going mad? Where is the single image used? I don't see it.

Posted by sue on 06/14, 09:07 AM

The image is a thin 2 pixel vertical line that divides each menu item. It's also shown under "The single image used:"

Posted by ddadmin on 06/14, 12:39 PM

how i put this on mu website

Posted by sanju on 06/22, 01:53 AM

this somehow doesn't work with Firefox :-(

Posted by VB on 06/27, 03:47 AM

This is very nice CSS menu , working great in FF and IE ... :D

Posted by Ariss on 08/05, 11:34 AM

i cant see how the id=current comes into it ? should one box be highlighted when active?

Posted by waynep16 on 08/08, 01:51 PM

Im not really sure what the * html ..... {} is supposed to do. It looks fine in FF, but i get a gap on the right in IE. I was hoping the menu would stretch across 100% of the page ...

Posted by Marc on 09/05, 10:59 PM

Great menus !
Im going to adapt slightly with graded bg images and use on a couple of my sites

Posted by Paul on 09/06, 11:22 AM

I would not recommend this

Posted by David on 09/08, 10:01 AM

Comment Pages 1 of 3 pages 1 2 3 >

Commenting is not available in this weblog entry.