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





web security linux ubuntu GIT svn Raspberry apache mysql php drupal cake symfony javascript Ajax css