Buenas Tardes Amigos de FDW.
Tengo un problema con el active de mi barra de navegacion, resulta que estoy haciendo mi menu y quiero ponerle el active en el hover, pero no funciona, tengo puesto las imagenes y todo pero no hace la funcion "active" que estoy haciendo mal, de momento solo tengo puesto el boton home para ir provando, el boton default seria de color negro, y cuando pasa el mouse por encima seria gris, y luego el active tambien seria gris, lo estoy haciendo con imagenes por la font, como puedo arreglar mi problema?
aqui pongo el codigo:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<style>
ul#topnav {
margin: 0; padding: 0;
list-style: none;
float: left;
width: 486px;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
}
/*--CSS Sprites - Default State--*/
ul#topnav a {
float: left;
display: block;
height: 40px; /*--Specify height of navigation--*/
text-indent: -99999px; /*--Shoot the text off the page--*/
background-position: left top;
}
/*--CSS Sprites - Hover State--*/
ul#topnav a:hover {
background-position: left -80px;
}
/*--Assign an image and width to each link--*/
ul#topnav li.home a {
background-image: url(images/home_a.jpg);
width: 68px;
}
ul#topnav li.about a {
background-image: url(about_a.jpg);
width: 86px;
}
ul#topnav li.gallery a {
background-image: url(gallery_a.jpg);
width: 93px;
}
ul#topnav li.services a {
background-image: url(services_a.jpg);
width: 101px;
}
ul#topnav li.shop a {
background-image: url(shop_a.jpg);
width: 69px;
}
ul#topnav li.contact a {
background-image: url(contact_a.jpg);
width: 69px;
}
#home li.home a, /*--Home Page > Home Link--*/
#about li.about a, /*--About Page > About Link--*/
#services li.gallery a, /*--Services Page > Services Link--*/
#portfolio li.services a, /*--Portfolio Page > Portfolio Link--*/
#contact li.shop a, /*--Contact Page > Contact Link--*/
#blog li.contact a /*--Blog Page > Blog Link--*/
{
background-position: left bottom;
}
</style>
<body>
<ul id="topnav">
<li class="home"><a href="home.html">Home</a></li>
<li class="about"><a href="about.html">About</a></li>
<li class="gallery"><a href="gallery.html">Gallery</a></li>
<li class="services"><a href="services.html">Services</a></li>
<li class="shop"><a href="shop.html">Shop</a></li>
<li class="contact"><a href="contact.html">Contact</a></li>
</ul>
</body>
</html> aqui tengo subido el navegador para que vean que no hace la funcion "active"
ejemplo