CSS Horizontal Menu
With a:hover effect and no need of preload image
The example:
The html:
<div id="menu">
<a href="#">LINK 1</a><a href="#">LINK 2</a><a href="#">LINK 3</a>
</div>
The CSS, just copy and paste:
#menu {
height:28px; /*same height of the font used in 'menu a'*/
padding:20px 0 /*make some space over and under the menu*/
}
#menu a {
width:190px; /*width of each link will be 190px*/
float:left; /*all 3 links will float to the left*/
display:block; /*this will make links have the proper width when floating*/
font:12px/28px verdana,arial; /*font-size/line-height and font-family*/
text-align:center; /*will align to the center of each 190px block*/
background:url(img/m.png) no-repeat 0 0; /*this is a 190x56px image, but will be visible only 190x28px*/
color:#fff; /*the color of the link*/
text-decoration:none /*evading the underline default effect*/
}
#menu a:hover, #menu a.here { /*the class .here will make to show the hover effect on the link permanently*/
background:url(img/m.png) no-repeat 0 -28px; /*this will make visible the other half of the image*/
}