WebHQ

The Headquarters Of Web

Facebook Twitter Google Plus RSS Feed Email

Solid Block Menu - Horizontal CSS Menus

Published on: at 3:09 PM | Posted By:
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):

Block DefaultBlock Active

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(http://3.bp.blogspot.com/-cONF606Au-A/UMwuKJbZCbI/AAAAAAAAAmM/z0oUY-KcHCs/s1600/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(http://4.bp.blogspot.com/-sMbbYMqPQ7s/UMwuIkFmeuI/AAAAAAAAAmE/l5ktsXM_Tc8/s1600/blockactive.gif) center center repeat-x;
}

</style>

The HTML:

<ul class="solidblockmenu">
<li><a href="http://webhq.blogspot.com/" class="current">Home</a></li>
<li><a href="http://webhq.blogspot.com/p/windows-hq.html">Windows</a></li>
<li><a href="http://webhq.blogspot.com/p/mobile-hq.html">Mobile</a></li>
<li><a href="http://peacehq.blogspot.com/">PeaceHQ</a></li>
<li><a href="http://webhq.blogspot.com/p/about.html">About</a></li>
</ul>
<br style="clear: left">

No comments On "Solid Block Menu - Horizontal CSS Menus"

Post a Comment

Get Latest Updates

Blog Archive

Total Pageviews