Dynamic Drive CSS Library- Solid Block Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Web Templates

Website Hosting

HTML Editor

Page Flip Creator- aXmag

Website Usability Testing

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Solid Block Menu

Author: Dynamic Drive

This is a lean, professional looking CSS menu that's draped in a solid two color background image. The divider between the menu items is simply a white CSS border. The style is extremely easy to customize thanks to the simple background image used.

Demo:

The two images used (resized horizontally):

The CSS:

<style type="text/css">

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(media/blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: transparent url(media/blockactive.gif) center center repeat-x;
}

</style>

The HTML:

<ul class="solidblockmenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" class="current">CSS Examples</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Webmaster Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
</ul>
<br style="clear: left" />

<p class="iepara">Paragraph that follows...</p>

Code Info

Rate this code:

Date Posted: 03/27/2007

Revision History: July 6th 08"- Updated CSS for improved clear float in IE.

Usage Terms: Click here

Your Comments (165)

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 5 of 17 pages « First < 3 4 5 6 7 > Last »

I cannot get it to work through an external stylesheet. Any ideas I have linked everything correctly but its not seeing the styles.

Posted by Jeff on 05/14, 02:21 PM

I never understand the point of web examples when they don't come complete. I'm starting out on this dd stuff and you have included and js.. so the menu stays the same. i,e, the tab doesn't change?? So how can one really learn from example when it all it appears to be is just a link!

Posted by Alex on 05/15, 05:07 AM

This code doesn't work, when using IE the menu is positioned right to the top image, please help.

</style>

Posted by yopyop on 05/15, 06:31 AM

Yes how do you center the tabs?

Posted by ICE on 05/15, 03:35 PM

Why i copy these code to editor,but it can't display.

Posted by eyeglasses on 05/16, 09:39 PM

great !
thank you very much !

Posted by CodeBit.cn on 05/18, 12:17 AM

This would actually be good for the active navigation part:

http://www.crucialwebhost.com/blog/you-are-here-using-php-to-highlight-navigation/

Eric: Why would you use a conditional? You should be able to do this menu without resorting to any sort of hack.

Posted by Kyle on 05/18, 01:42 AM

Wowww Thanks YOu

Posted by Guilty on 05/19, 04:03 AM

I tried this and it seems to be working fine in IE and FF. Great work!....

Posted by Felix on 05/22, 11:28 PM

I wish to integrate this code in a Oscommerce store. How can I do this? Thank you.

Posted by Black on 05/23, 04:03 AM

Comment Pages 5 of 17 pages « First < 3 4 5 6 7 > Last »

Commenting is not available in this weblog entry.