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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEZEE__qtes3e3WL1zJbgWHFfFEtRkvhw4YB50xdDe0uHZ1oHi7QygC5tc6XIJ3iUiHp5_Pv8Md3zXJngAYNDmo1l0IgOQ-MIyg4Zl-VgmisWuvYJsQkeCdWr7X9JNRjX0E0BJvIDN0e_D/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicJPlKsrBZ08s9O62RDlXptEyF0MLtHBRQXUxhgpyLueGefvD_NUt0O8sSvn3kCXV5ZyQhy29WqQUUVCVt4j0m86zXwAAjC6UofVodWc3od0b0NFrEHb27twORWXSSV69ZfW8FwSo2j7Gn/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