Dynamic Drive CSS Library- Solid Block Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

PSD to HTML

HTML Editor

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

i am having problems with internet explorer, the latest one. It works fine with mozilla firefox, but internet explorer 7 is giving problems. What do i need to add or subtract?
Thanks for responding.

Posted by 3ripleB on 04/10, 10:45 PM

Very nice ... good job

Posted by Yahya on 04/12, 05:26 AM

Who else is having IE problems with this?

Posted by Signalfire on 04/12, 09:17 AM

It works fine in IE 7 take this part out of the css if your putting the css in a seperate .css file:
<style type="text/css">
and

</style>

<![endif]-->

Those are only needed if your putting the css inline with your html, in other words if your css codes are in your html document.

Posted by EntityDesigns on 04/13, 01:35 PM

Also forgot there is this bit of code you do not need either if put in a seprate css file the other stuff i said to take out is in the beggining and end of css info but this was in between near bottom:

</style>



<!--[if IE]>

<style type="text/css">

Posted by EntityDesigns on 04/13, 01:52 PM

thats a cool code but it would be neater if it could
have a button to mix up the links that would be cool!!

Posted by Ryanb58 on 04/14, 04:15 PM

Sweet!! I'm going to use it on my website :D

Posted by Pacman on 04/15, 04:10 PM

How do you code a navigation menu into a default.css setup so that you need only make a change
to the default.css coding and the change will take affect on all your webpages. Thank you.

Posted by KT3001 on 04/16, 09:17 AM

put it the code only to a *.css file and link it like this <link rel="stylesheet" media="screen" type="text/css" href="path_to_css_file.css" >

Posted by Pacman on 04/16, 01:00 PM

forgot to mention... put that code between your <head></head> tags ;)

Posted by Pacman on 04/16, 01:01 PM

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

Commenting is not available in this weblog entry.