Menu Image background rollover with CSS
Posted under » CSS on 23 April 2010
Rollover using image background. The text are not raster but CSS. Good for SEO purposes. Bad if you want to have fancy text because you can`t have fancy dropshadow and what not.
The CSS :
/* NAVIGATION BUTTONS */
.menu {
height: 44px;
width: 844px;
}
.cssnav {
position:relative;
float: left;
margin: 0;
padding: 0;
font-family: arial, helvetica, sans-serif;
background: url(overbtn.jpg) no-repeat;
width: 211px;
height: 44px;
overflow:hidden;/* for ie to hide extra height*/
}
.cssnav a {
display: block;
color: #000000;
font-size: 11px;
width: 211px;
height: 44px;
display: block;
float: left;
color: black;
text-decoration: none;
overflow:hidden;/* for ie to hide extra height*/
}
.cssnav a:hover {
color: #ffffff;
}
.cssnav img {width: 211px; height: 44px; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}
.cssnav span {
position: absolute;
left: 30px;top: 15px;
text-align: center;
width: 150px;
cursor: pointer;
}
/* END OF NAVIGATION */
The HTML
