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

I have my own CSS code but when i add code {font-style:underline !important;} it doesnot work

Posted by Mac on 02/13, 11:00 PM

I was very pleased to find this site.I wanted to thank you for this great read!! I definitely enjoying every little bit of it smile I have you bookmarked to check out new stuff you post.
Software Computers - unique catalogue of new useful computers software products with detailed description.

Posted by Computers Software on 02/19, 10:52 PM

I actually like SEO, but if I had to say, the hardest part is definitely link building, usually just because it takes the longest.
Disk encryption software - Powerful encryption software with pre-boot authentication secures 100% of your hard disk drive, including the OS.

Posted by Disk encryption software on 04/16, 06:20 AM

Admiring the time and effort you put into your blog and detailed information you offer! I will bookmark your blog and have my children check up here often. Thumbs up! speedos

Posted by thongs on 04/21, 08:08 AM

Valuable information and excellent design you got here! I would like to thank you for sharing your thoughts and time into the stuff you post!! Thumbs up
hair loss treatment reviews

Posted by treatment for hair loss on 04/28, 05:19 AM

Thanks for taking the time to post such a detailed and informative article. It has given me a lot of inspiration and I look forward to more like this in the future.

Posted by cocktailkleid on 04/30, 05:09 AM

excellent codes and I am going to use in our current project

thanks
kumar
http://www.planetsourcecode.in

Posted by kumar on 05/07, 09:51 PM

This is such a great resource that you are providing and you give it away for free. I love seeing websites that understand the value of providing a quality resource for free. It’s the old what goes around comes around routine. Did you acquired lots of links and I see lots of trackbacks?
hgh growth hormone

Posted by hgh products on 05/08, 06:24 AM

Atherwise, good job on this one, its excellent.

Posted by Wpdigger on 06/02, 11:22 PM

Comment Pages 4 of 4 pages « First < 2 3 4

Commenting is not available in this weblog entry.