Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web 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:

The HTML:

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.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.