This is a most beautiful looking, imageless horizontal menu. The selected menu item merges with the band below it to help it stand out even more. It features beautiful dotted block and bottom bar. As mentioned, the menu uses no images, making customization a breeze.
Demo:
The CSS:
<style type="text/css">
#headermenu{
background: #e5e5e5;
width: 100%;
padding: 0;
}
#headermenu ul{
padding: 0 0 0 5%;
list-style: none;
margin: 0;
}
#headermenu li{
display: inline;
}
#headermenu ul li a{
border-right: 3px solid #e5e5e5;
border-left: 3px solid #e5e5e5;
text-decoration: none;
font: bold 13px arial;
margin-right: 13px;
padding: 9px 11px;
color: #000000;
display: block;
float: left;
}
#headermenu a:hover{
border-right: 3px dotted #e5e5e5;
border-left: 3px dotted #e5e5e5;
background: #DD4B39;
color: #FFFFFF;
}
#headermenu #current a{
border-right: 3px dotted #e5e5e5;
border-left: 3px dotted #e5e5e5;
background: #dd4b39;
color: #FFFFFF;
}
#headermenuline{
border-bottom: 2px dotted #FFFFFF;
background: #dd4b39;
line-height: 10px;
height: 10px;
clear: both;
}
</style>The HTML:
<div id="headermenu"> <ul> <li id="current"><a href="http://webhq.blogspot.com/" title="The Head Quarter Of Web">Home</a></li> <li><a href="http://webhq.blogspot.com/p/windows-hq.html" title="Windows Downloads">Windows</a></li> <li><a href="http://webhq.blogspot.com/p/mobile-hq.html" title="Mobile Contents">Mobile</a></li> <li><a href="http://peacehq.blogspot.com/" title="Easiest way to live in peace">PeaceHQ</a></li> <li><a href="http://webhq.blogspot.com/p/about.html" title="About the designer">About</a></li> </ul> <div id="headermenuline"> </div></div>
No comments On "WebHQ Header menu - Horizontal CSS Menus"
Post a Comment