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 2 of 3 pages < 1 2 3 >

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

i think this is where you are getting your space in IE

Posted by Mohsin on 09/30, 02:04 PM

to download image just click on vertical bar of image right mouse and save target as will copy image enjoy

Posted by satish on 10/13, 01:36 AM

This is a helpful tip for beginners who are not expert in HTML techniques and codes.

Posted by mopex on 11/23, 04:49 AM

good sample, very simple to custom
but some "bugs":

to have "a:active" working fine, in css file, add :

#menu ul li a:link{
}
#menu ul li a:active{
color: #40a6cc;
background-color: #092869;
}

and

#menu ul{
margin: 0;
padding: 0;
margin-bottom: 1em;
float: left;
font: bold 100% Tahoma;/* <-- and not Tohoma*/
width: 812px;
border: 1px solid #625e00;
background-color: #f9ff91;
}

thanks to author.

Posted by miko on 11/29, 11:15 AM

there is no need to add image..
just put,a right border 1 pixel on
#vdividermenu ul li a

Posted by Engin on 12/09, 03:32 PM

Thanks for this, however, there is no use for <li id="current">

i guess....we can make our own? not that it's too difficult :)

Posted by Nate on 06/24, 12:03 PM

good work man ,but i hate the color,and thank you.

Posted by Autocad 2007 on 09/22, 12:28 PM

the menu functions in FF but displays a little oddly. any fixes for this? thanks!

Posted by melissa on 11/04, 01:32 AM

what if the last link (Forums) doesn't have a divider after it?

Posted by Elvie on 01/30, 11:22 PM

I have tried two of the menu examples and unlike you website they behave differently in my web page. Everything seems ok except the menu wraps. I have worked with CSS before but I just can not seem to fix this issue.

Posted by jim on 06/10, 07:52 PM

Comment Pages 2 of 3 pages < 1 2 3 >