Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

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.


The single image used:

The CSS:


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;


#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 >

Commenting is not available in this weblog entry.
Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.