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

i really like it i might use it on my homepage.

Posted by Seich on 09/24, 09:20 PM

How do I position this on my page??

Posted by veronica on 10/04, 07:31 AM

simple and elegant in the page header...great menu! thanks

Posted by ejuliet on 10/30, 11:42 AM

so do you just post the positive comments. your stuff is fucked .......... asshole~

Posted by jo mama on 05/01, 09:59 AM

Is there anyway that I can make this menu centered? I have customized it to fit my needs, but cannot seem to get it to sit in the center of my table...

Posted by David on 06/25, 08:08 AM

Look at the footer on my page. Any idea what could be causing this?

I can't find a field that would cause the thick gray lines.

Posted by Gary on 06/25, 08:10 AM

Never mind... it is my menudivide file... I will modify that.

Posted by Gary on 06/25, 08:11 AM

how do i move the navigation to position it anywhere i like? how do i that?

Posted by jenny on 09/03, 01:17 PM

text-align:center will centre the menu...

Posted by richard fuller on 10/24, 12:55 AM

"text-align:center"
ok.

Where?

In my case I'd like to align the menu items to the right, but I believe it would be the same procedure.

Thanks in advance.

Posted by talofo on 10/30, 09:25 AM

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

Commenting is not available in this weblog entry.