CSS Examples 
CSS Drive horizontal menu buttons
Author: CSS Drive
This is the same horizontal menu used here on CSS Drive. It dressed up regular <a> elements to be 2-state rollover menu buttons. The combination of "display: block" and "float: left" makes this possible.
The HTML:
<div class="hbuttons">
<a href="http://www.cssdrive.com">Home </a> <a
href="http://www.cssdrive.com/index.php/main/submit/">Submit </a> <a
href="http://www.cssdrive.com/index.php/main/resources/">Resources </a> <a
href="http://www.cssdrive.com/index.php/main/contact/">Contact </a>
</div>
<div style="clear: left;"></div>
The CSS:
.hbuttons a{
display: block;
text-decoration: none;
font: bold 13px Arial;
color: black;
width: 78px;
height: 23px;
float: left;
display: inline;
margin-right: 8px;
background-image:url(tabsquare.jpg);
background-repeat: no-repeat;
padding-top: 4px;
text-align:center;
}
.hbuttons a:hover{
background-image:url(tabsquareover.jpg);
}
The images:
Comments (18)
Its really useful.. Pal... Thanx.
i really like how this works! but i dont understand it
it is cool but still it takes time to load the images in IE 6
in firefox its cool
i've also seen these where the image is one file and just the background image position is shifted, which makes for a very neat and clean exposition. (ie both button states are inline in one image)
Check http://www.shelter-rocks.nl to see my problem, I really like the script, and it work nice but my website is centered and the menu doesn't move with the auto margins from my webpage!
Does anybody have an answer for me?
Regards, Marco
Great it's again a great template that have helped me to understand how to build horizontal CSS menus
Thanks very much for this code. It works perfectly. All the best, Luke
A nice replacment to do the same thing in JavaScript... but with no buggy JavaScript!
Nice!
