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

I have used this code but I don't understand what i'm supposed to use the image for and the grey line above and below has gaps where the text is? have I done somthing wrong?

Posted by tobnob on 08/12, 05:12 AM

I like it!! It's very clean and clear.

Posted by kieren on 09/18, 01:23 PM

This navigation menu is awesome! It would also be great if you could make another two versions of this: the first would be a horizontal version with dropdown menu's when the cursor hover's over it (allowing for another level within it as well). The other version would be the same as what ive just mentioned but as a vertical menu with levels.

Great work guys, keep it up!

Cheers,

Ash.

Posted by Ash on 10/07, 09:17 AM

A nice, clean, simple menu. Thanks again, DD!

Posted by Dan on 10/13, 09:20 PM

JASBIR

HOW TO CHANGE THE FONT STYLE OF THE MENU

it's easy, just add FONT-FACE on this code

#underlinemenu{
    font-family: you font list here;
    margin: 0;
    padding: 0;
} 

Posted by Jauhari on 11/22, 08:53 PM

I like simplicity and usability in this menu.

Posted by Beatbox on 12/22, 10:11 AM

Nice .. :)
how can we have the background image in the first li too?
so it will not look empty at the beginning

Posted by Dragon on 03/20, 09:13 PM

I am excited to use this on my site, but I really want to edit some of the css to my liking so that is works well with my site... may I?

Posted by Sara on 07/03, 11:52 AM

I also would love to know how to center the menu.

Posted by tess on 08/07, 08:29 PM

Thnx? Nice tool for work and study CSS possibility... Like it! Clean and clear.

Posted by Gadget on 08/21, 10:40 AM

Comment Pages 2 of 4 pages < 1 2 3 4 >

Commenting is not available in this weblog entry.