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