Dynamic Drive CSS Library- Underline Horizontal Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Underline Horizontal Menu

Author: Dynamic Drive

This is a sleek CSS horizontal menu with a popular "underline" effect shown whenever the mouse rolls over a link. Each link (<a>) also carries a background image, used to as the indented line graphic that separates each menu item. We choose to use a graphic instead of CSS's dashed line effect, since it seems to look better.

Demo:

The lone image (resized for easier download):

The CSS:

<style type="text/css">

#underlinemenu{
margin: 0;
padding: 0;
}

#underlinemenu ul{
margin: 0;
margin-bottom: 1em;
padding-left: 0;
float: left;
font-weight: bold;
width: 100%;
border: 1px solid #DFDFDF;
border-width: 1px 0;
}

* html #underlinemenu ul{ /*IE only rule. Delete extra margin-bottom*/
margin-bottom: 0;
}

#underlinemenu ul li{
display: inline;
}


#underlinemenu ul li a{
float: left;
color: gray;
font-weight: bold;
padding: 2px 6px 4px 6px;
text-decoration: none;
background: white url(media/menudivide.gif) top right repeat-y;
}

#underlinemenu ul li a:hover{
color: black;
background-color: #F3F3F3;
border-bottom: 4px solid black;
padding-bottom: 0;
}

</style>

The HTML:

<div id="underlinemenu">
<ul>
<li><a href="http://www.dynamicdrive.com" title="Home">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" title="CSS Library">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: 05/01/2006

Revision History: None

Usage Terms: Click here

Your Comments (40)

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 4 pages 1 2 3 > Last »

I use that menu in mine original page, Thanks Nicely, I love Dynamicdrive :)

Posted by Emexci on 05/12, 11:31 AM

HOW TO CHANGE THE FONT STYLE OF THE MENU

Posted by JASBIR on 05/27, 11:26 AM

ok im kind of new, but i dont know how to get this into Vbulletin as my menu on my forum. does anyone know?

Posted by zach on 06/05, 06:20 PM

if only you lot could make one like this again but:

1. have fading in hover image

or

2. fading in hover image and second level

Posted by james on 06/19, 01:28 PM

I love this menu !..awesome job DD ..however please update some more CSS on the site !..there is little..and im very unhappy to see very little updates ! :(

Posted by Alvito Falcon on 06/23, 07:49 AM

Nice, this is exactly what i was looking for!

Posted by Chris on 06/23, 07:58 PM

How come there is the id "current", but it is not included in the CSS, do you know how to include it?

Atherwise, good job on this one, its excellent.

Posted by Samsoske Yugi on 06/26, 01:31 PM

~Here's one way...
Place the following code into the CSS:

#underlinemenu ul #current a{
color: black;
background-color: #F3F3F3;
border-bottom: 4px solid black;
padding-bottom: 0;
}

Posted by InsideLine on 06/27, 10:16 AM

How can you get the menu to appear centered instead of left. I edited the 'float' attribute but it distorted the menu appearance even though it diplays centrally. Thanks

Posted by David Scriney on 07/26, 06:15 PM

the font style isn't in there. it'll take on whatever style you have on your page already.

Posted by afsdf on 07/29, 01:32 PM

Comment Pages 1 of 4 pages 1 2 3 > Last »

Commenting is not available in this weblog entry.