Home

CSS Examples CSS Drive horizontal menu buttons

Date: 09/12/2004 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.

#1: Sashikumar on 11/14 at 05:18 AM

i really like how this works! but i dont understand it

#2: mike on 04/25 at 08:24 PM

it is cool but still it takes time to load the images in IE 6
in firefox its cool

#3: pitat450 on 07/31 at 05:47 PM

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)

#4: papercube on 09/07 at 06:09 PM

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

#5: Marco on 05/13 at 07:13 PM

Great it's again a great template that have helped me to understand how to build horizontal CSS menus

#6: flash guy on 06/09 at 02:34 AM

Thanks very much for this code. It works perfectly. All the best, Luke

#7: Luke Taylor on 06/29 at 10:52 AM

A nice replacment to do the same thing in JavaScript... but with no buggy JavaScript!

Nice!

#8: s33nagain on 07/07 at 02:16 PM
Commenting is not available in this weblog entry.


Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

All images and content copyright © 2017 CSS Drive. Contact Info | Back to Top
Affiliate Discloser: We receive a commission from purchases through some links on this site