Foros del Web » Creando para Internet » CSS »

pequeño arreglo para mi menú

Estas en el tema de pequeño arreglo para mi menú en el foro de CSS en Foros del Web. hola a todos! tengo un menu horizontal desplegable, que cogi de ejemplo de la web de contenidos recopilados de este foro. El codigo del menú ...
  #1 (permalink)  
Antiguo 21/04/2009, 03:45
 
Fecha de Ingreso: diciembre-2008
Mensajes: 52
Antigüedad: 9 años
Puntos: 0
pequeño arreglo para mi menú

hola a todos!

tengo un menu horizontal desplegable, que cogi de ejemplo de la web de contenidos recopilados de este foro. El codigo del menú es este:

<div id="menu">
<ul>
<li class="nivel1"><a href="QuienesSomosok.aspx" class="current">¿Quiénes somos?</a><!--[if lte IE 6]><a href="QuienesSomosok.aspx" class="nivel1ie">¿Quiénes somos?<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li class="nivel1"><a href="Serviciosok.aspx" class="nivel1">Servicios</a><!--[if lte IE 6]><a href="Serviciosok.aspx" class="nivel1ie">Servicios<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li class="nivel1"><a href="Galeriaok.aspx" class="nivel1">Obras</a><!--[if lte IE 6]><a href="Galeriaok.aspx" class="nivel1ie">Obras<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li class="nivel1"><a href="PresupuestoTermok.aspx" class="nivel1">Presupuestos</a><!--[if lte IE 6]><a href="PresupuestoTermok.aspx" class="nivel1ie">Presupuestos<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li class="nivel1"><a href="#" class="nivel1">Ayuda</a><!--[if lte IE 6]><a href="#" class="nivel1ie">Ayuda<table class="falsa"><tr><td><![endif]-->
<ul class="nivel2">
<li><a href="Consejosok.aspx#">Consejos</a></li>
<li><a href="Ahorrook.aspx">Ahorra energía</a></li>
<li><a href="Manualesok.aspx">Manuales</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="Ofertasok.aspx" class="nivel1">Ofertas</a><!--[if lte IE 6]><a href="#" class="nivel1ie">Ofertas<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li class="nivel1"><a href="Noticiasok.aspx" class="nivel1">Noticias</a><!--[if lte IE 6]><a href="#" class="nivel1ie">Noticias<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li><li class="nivel1"><a href="contactarok.aspx" class="nivel1">Contacto</a><!--[if lte IE 6]><a href="#" class="nivel1ie">Contacto<table class="falsa"><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li></ul>
</div>

y el codigo del css es:

#menu { margin: 0 0 50px; text-align:center; font: bold 1.22em "Trebuchet MS"}
#menu ul {list-style-type: none}
#menu ul li {/*padding:0 25px;*/ width:auto }
#menu ul li.nivel1 { float: left; /*margin-right: 1px;*/}

/*parece ser que esto es como el contenedor del boton*/
#menu ul li a {display: block;
text-decoration: none;
color: #B4B4B4;
background-color: #8c2E2E;
font: verdana;
border: solid 1px #66a3cf;
padding:4px 28px ;position: relative}
#menu ul li a.nivel2, #menu ul li a.nivel2ie {color: #B4B4B4;}
#menu ul li a.current {float: left; /*margin-right: 1px;*/ background: #66A3CF; color: #fff; }
/*#menu ul li a.current:hover {background-color: #FF8787;color: #000;
position: relative;}*/

#menu ul li a.nivel1, #menu ul li a.current, #menu ul li a.nivel2 {display: block!important;display: none;position: relative;}
#menu ul li:hover {position: relative;}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #FF8787;color: #000;position: relative;}
#menu ul li ul {display: none;}
#menu ul li:hover ul.nivel2, #menu ul li a:hover ul.nivel2{display: block;
position: absolute;left: 0px;}
#menu ul li ul li a:hover ul.nivel3, #menu ul li ul li:hover ul.nivel3 {display: block;
position: absolute;
left: 121px!important;left: 120px;
top:0px!important;top: -21px;}
#menu ul li ul li a {width: 100px;height:auto;/*padding: 8px 0px;*/border-top-color: transparent;}
#menu ul li ul li a:hover {border-top-color: #66A3CF;position: relative;}
#menu ul li ul li ul li a.primera {border-top-color: #66A3CF;}


mi intencion era, que cuando se este navegando por una seccion de la web, el boton de esa seccion este en azul. Por lo tanto añadí esto:
...<li class="nivel1"><a href="QuienesSomosok.aspx" class="current">...

y en el css:
#menu ul li a.current {float: left; background: #66A3CF; color: #fff; }


así he conseguido que funcione en los navegadores que no son IE. que debo modificar para que tambien se quede el boton actual en azul en IE? Tambien tengo el problema de que al desplegar el menu en IE, los botones que se desplegan no quedan bien encajados con el de arriba, veis algun fallo mas en mi codigo?

muchas gracias
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:42.