Hola,
Tengo un menú con el que me sucede una cosa curiosa, funciona perfectamente en FireFox 6, 7, Opera, Chrome, IE7 y Chrome. Todos para Windows.
Sólo en Safari y FireFox 7 para Mac, el último apartado "Contacto" cambia de línea, no se mantiene en la misma línea, como si no respetara el float:left;
Las anchuras están bien, he probado reducir los márgenes y no es éso.
Está implementado de la siguiente manera:
Código HTML:
<ul id="menu2">
<li><a href="#">Nuestra Compañía</a>
<ul>
<li><a href="#">Quiénes somos / Equipo</a></li>
</ul>
</li>
<li><a href="#">Servicios</a>
<ul>
<li><a href="#">Servicio1</a></li>
<li><a href="#">Servicio2</a></li>
<li><a href="#">Servicio3</a></li>
<li><a href="#">Servicio4</a></li>
</ul>
</li>
<li><a href="">Trabajos realizados</a>
<ul>
<li><a href="#">Trabajo1</a></li>
<li><a href="#">Trabajo2</a></li>
<li><a href="#">Trabajo3</a></li>
<li><a href="#">Trabajo4</a></li>
<li><a href="#">Trabajo5</a></li>
<li><a href="#">Trabajo6</a></li>
</ul>
</li>
<li><a href="#">Dónde estamos</a></li>
<li><a href="#">Noticias</a></li>
<li><a href="#">Contacto</a></li>
</ul> El código CSS es:
Código HTML:
#menu2 { height:36px; margin-top:20px; position:relative; width:750px; }
#menu2 LI { list-style:none; float:left; margin-right:25px; }
#menu2 LI.last { margin-right:0 !important; }
#menu2 LI A { display:block; font-weight:bold; padding:8px 0; border-bottom:5px solid #FFF; text-transform:uppercase; color:#1a171b; }
#menu2 LI A:hover,
#menu2 LI.current_page_parent A { text-decoration:none; border-bottom:5px solid #e01e26; }
#menu2 LI UL { display:none; }
#menu2 LI:hover UL,
#menu2 LI.hover UL { list-style:none; position: absolute; display: inline; left: 0; width: 100%; margin: 0; padding: 0; }
#menu2 LI:hover UL LI,
#menu2 LI.hover UL LI { float: left; margin-right: 25px; }
#menu2 LI:hover UL LI A,
#menu2 LI.hover UL LI A { font-size:11px; display:block; color:#49464a; text-transform:uppercase; border-bottom:none; }
#menu2 LI:hover UL LI A:hover,
#menu2 LI.hover UL LI A:hover,
#menu2 LI UL LI.current_page_item A { color: #e01e26; }
Cual puede ser la causa ?
Ya sé que en IE6 no funciona, pero no es el objetivo. Tengo también un reset CSS de margin y padding:0 para todos los elementos:
Código HTML:
*, HTML, BODY, UL, OL, LI { margin:0; padding:0; }