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:
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
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 16 of 17 pages « First < 14 15 16 17 >
I echo the problems experienced in IE7, the black background of the menu bar drops down, and the buttons step down as well. Tried the edits indicated by EntityDesigns - problem remains. This is a great look, can anyone help me resolve the IE issue? Thanks.
Correction! The edits stated by EntityDesigns works perfectly in IE 7. I neglected to take out the stated code at the beginning. Thanks all!
I am very new to this. What section do I paste the HTML code in? Does it go in the head section?
How do you center the buttons so the first button (usually HOME) isn't slammed all the way to the left?
I was able to center it by saving the original code to an external style sheet, replacing the "." with a "#" in front of each class style name (".solidblockmenu" to "#solidblockmenu") and removing the float:left attribute and modifying the margin attribute to "margin:0 auto 0 auto".
Hope this helps, only took a minute for me to do and it works great!
Hope this helps, only took a minute for me to do and it works great!
note: this is just to center the bar itself, you'll have to add to this to center the buttons
<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>
<ul class="solidblockmenu">
<li>Home</li>
<li>CSS Examples</li>
<li>Forums</li>
<li>Webmaster Tools</li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li>Gallery</li>
</ul>
<br style="clear: left" >
Paragraph that follows...
.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>
<ul class="solidblockmenu">
<li>Home</li>
<li>CSS Examples</li>
<li>Forums</li>
<li>Webmaster Tools</li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li>Gallery</li>
</ul>
<br style="clear: left" >
Paragraph that follows...
on mouse hover can i display some text(like help)
Thank you so much, this is a great copy and paste nav!
Thanks alot...worked pretty good for me..
Commenting is not available in this weblog entry.






