no puedo hacer que mi menú funcione correctamente

Citar

Escrito el 20 Ene 2010 08:10 pm

Hola a todos:

Tengo un problema con mi menú, no logro hacer que cuando haga click en una opción del menú (como: inicio o contáctenos), y que cuando haga click en un submenú, que quede activado la parte del menú que le corresponde con el fondo y el formato que le he dado al pasar el mouse (:hover).

Según lo que he leido eso se hace con :active pero no me funciona, simplemente es como si active no estuviera.

mi archivo css es este:

Código :

#menu { 
font-size: 0.20em;
width: 800px;
margin: 20px auto;
padding:0px 0px;
text-align:left;
}

#menu ul { list-style-type: none;
padding:0; 
margin:0; 
margin-bottom:0; 
}

#menu ul li.nivel1 { 
float: left;
/*height:35px; */
/*width: 110px;*/
margin-right: 2px;
color:#FFFFFF; 
font-size:11px; 
text-align:center;
}

#menu ul li a { 
   display: block;
   text-decoration: none;
   color: #fff;
   background-color: #000000;
   padding: 8px;
   position: relative;
   border: solid 1px #666666;
   width: 116px;
   height: 20px;
   font-family: "Comic Sans MS";
   font-weight: bold;
   }

#menu ul li:hover,#menu ul li:active{position: relative;
}


#menu ul li a:hover,#menu ul li a:active {
   background:url(../images/fondo_menu.jpg);
   color: #FFFFFF;
   position: relative;
   border: solid 1px #804040;
   font-weight: normal;
}


#menu ul li:hover a.nivel1,#menu ul li:active a.nivel1 {
position: relative;
color:#000000;
}

#menu ul li a.nivel1 {display: block!important;
display:none;
position: relative;
}

#menu ul li ul {display: none;
}

#menu ul li a:hover ul, #menu ul li a:active ul {display: block;
position: absolute;left: 0px;
}

#menu ul li:hover ul, #menu ul li:active ul{display: block;
position: absolute;left: 0px;
}

#menu ul li ul li a {
   width: 130px;
   height: 20px;
   padding: 0px 0px 0px 0px;
   border-bottom:solid 2px #804040;
   border-left:solid 2px #804040;
   border-right:solid 2px #804040;
   background:url(../images/submenu1.jpg);
   color:#FFFFFF;
   font-weight: normal;
   left:-9px;
   top:13px;
}

#menu ul li ul li a:hover {
position: relative;
border:SOLID 3PX #804040;
background:#9F9F9F; 
color:#000000; 
font-weight:bold;
}


table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}

Gracias de antemano a quien pueda darme la solución

Por ely0910

6 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 21 Ene 2010 04:25 pm

ESPECIFICIDAD en los selectores.
Mira el ejemplo y saca tus conclusiones:

Código HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>DvillB</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
html, body {width: 100%; height: 1519px; overflow: auto;}
* html, * body { height: 100%; overflow:auto;}
* {margin:0; padding:0; outline: none; position: relative;}
#menu {text-align: center;}
#menu ul {list-style-type:none;}
#menu ul li {float: left; width: 150px; background: #996600}
#menu ul li a {display: block; padding:4px 0; color:#f5f5f5; text-decoration: none;}
#menu.pag_inicio ul li a#inicio,
#menu.pag_contacto ul li a#contacto,
#menu.pag_nosotros ul li a#nosotros,
#menu.pag_galeria ul li a#galeria,
#menu ul li a:hover, #menu ul li a:active
{color: #444; background: #FFCC00;}
</style>

</head>
<body id="m">
  <div id="menu" class="pag_contacto"> <!--aplica su clase correspondiente en cada html -->
    <ul>
        <li><a id="inicio" href="inicio.html">Inicio</a></li>
        <li><a id="contacto" href="contacto.html">contacto</a></li>
        <li><a id="nosotros" href="nosotros.html">nosotros</a></li>
        <li><a id="galeria" href="galeria.html">galeria</a></li>
    </ul>
  </div>
</body>
</html>

Si no pillas algo, comenta.

Saludos

Por DvillB

118 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 22 Ene 2010 08:40 pm

Ya vi lo que me faltaba, y avidinen que?.. por fin funcionó quería que funcionara....

Muchas gracias por tu ejemplo, me ha sido de gran ayuda....

Por ely0910

6 de clabLevel

Envíale un mensaje privado

no puedo hacer que mi menú funcione correctamente

Escribe una respuesta rapida