Menú dropdown horizontal con CSS

[eturi]

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; }

[Oscar_Hidro]

Probe tu ejemplo, y me resulto aumentandole el widht a unos 950px;

Código CSS:

#menu2 { height:36px; margin-top:20px; position:relative; width:950px; }
 

ó tambien prueba reduciendole el margin-right en tu segunda linea.

Código CSS:

#menu2 LI { list-style:none; float:left; margin-right:25px; }
 

Y sobre estas dos lineas primeras en tu codigo css, le vas reduciendo y aumentando segun lo creas conveniente. Lo probe en los exploradores que comentas y si da el resultado.

Espero te sirva, saludos!!