[SOLUCIONADO] Menu desplegable para adaptar a los navegadores

[wmdiseno]

Hola buena noches, soy medio principiante, hago paginas web a la medida del publico, y traigo una duda con un menú desplegable, el menú es el siguiente:

Código CSS:

<style type="text/css">
body { background-color:#AF4A3B; }
    * {
        
        padding:0px;
        margin:0px;
    
     }
    #header {
        
        font-size: 9pt;
        margin:center;
        width:px;
        height:31.9px;
        font-family:Georgia, "Times New Roman", Times, serif;
        z-index: 0;
        position:relative;
    
        
        
    }
    
    ul, ol {
      list-style:none;  
   }
   .nav li a {
       background-color:#9F2019;
       color:#fff;
       text-decoration:none;
       word-spacing:1px;
       background-position:100%;
       padding:8.9px 4.9px;  
       display:block;
       
    }
    
    .nav li a:hover { 
    background-color:#999;}
    
    .nav > li {
        float:left; 
 
    }
    
    .nav li ul {
        display:none;
        position:absolute;
        min-width:140px; 
    
 
    }
    
    .nav li:hover > ul { 
       display:block;
    
    }
    
    .nav li ul li { 
    position:relative;      
    }
 
    .nav li ul li ul {
    right:-140px;
    top:0px;
    
    }
     #slider {
               
                z-index: -1;
                position:absolute;
                width:1080px;
                height:334px;
                
                
                /*IE bugfix*/
                padding:0;
                margin:0;
            }
            
            #slider li { list-style:none; }
            
            #page {
                width:10px;
                margin:0px auto;
            }
    
    
    </style>
 

Y El contenido en HTML.

Código HTML:

<div id="header">
     <ul class="nav">
     <li><a href="index.html">Servicios Legales</a>
      <ul>
          <li><a href="pymes.html">Pymes</a></li>
          <li><a href="macroempresas.html">Macroempresas</a></li>
          <li><a href="particulares.html">Particulares</a></li>   </ul>
    </li>
    
     <li><a href="">Coberturas</a>
      <ul>
          <li><a href="abogadomatamoros.html">Matamoros</a></li>
          <li><a href="abogadoreynosa.html">Reynosa</a></li>
          <li><a href="abogadoqueretaro.html">Queretaro</a></li>
      </ul>
     </li>
     
    <li><a href="">Ventajas y Fortalezas</a>
      <ul>
          <li><a href="nuestrametodologia.html">Nuestra Metodologia Honorarios a su medida</a></li>
      </ul>
    </li>
    
  <li><a href="">Contabilidad</a>
      <ul>
          <li><a href="pymes.html">Pymes</a></li>
          <li><a href="contabilidadempresa.html">Empresas Consolidadas</a></li>
      </ul>   
        </li>
     <li><a href="">Contacto</a>
      <ul>
          <li><a href="contactanos.html">Oficinas y Contacto</a></li>
          
          
      </ul>
     </li>
 

Mi problema es que se expande el menu desplegable y se distorciona mi maqueta de pagina, cuando lo abro con google chrome, pero si lo abro con mi navegador predeterminado Safari, se ve perfecto, lo andaba realizando la maqueta pero no cheque ese pequeño detalle en abrirlo en otro navegador, pensando que no me iba a fallar. consulto a los mejores, espero que me puedan ayudar.

Gracias!

[NueveReinas]

¿Pero no usas media-queries?

[ZoroRoronoa]

Se te distorciona al reducir la ventana de tamaño.
O se te distorciona simplemente con abrirlo con chrome ?

Ahora, parece que la primer etiqueta <ul> con lase "nav", jamas la cierras, al igual que el div header

[wmdiseno]

hola por responder a esta hora, si efectivamente, se me distorsiona cuando abro chrome. en el safari lo visualizo y se ve perfectamente pero cuando abro chrome se hace mas grande el menú desplegable y se. distorsiona, y no, no uso media-queries.

[inieva]

Consejos a simple vista. No uses pt para el font-size salvo que sea para media print. Y definitivamente no uses medidas decimales en pixeles.

[wmdiseno]

ya lo eh intentado y sigue dandome el mismo resultado


Asi se ve en safari:



Asi se ve en chrome:




alguien que me pueda echar una mano, se lo agradecería demasiado.

[ZoroRoronoa]

El problema en veces radica en que algunos navegadores al hacer la division de % a px, los redondea.

Ejemplo.

Tienes un padre de 120px.
Dentro tienes 3 hijos y le aplicas

34%
33%
33% = 100%

Pero algunos navegadores lo redondean
34% = 40.8 = 41px
33% = 39.6 = 40px
33% = 39.6 = 40px
total 121px

Es decir, ya te pasaste 1 px, y se distorciona.

Ademas tienes varios errores width:px;
y pixeles con decimales, esa no es buena practica. Ademas de que creo que nisiquiera es compatible dividir un pixel.

Mejora esos aspectos. Saludos.

[wmdiseno]

Si fueras tú como lo elaborarías amigo, esta son las dimensiones, del menú desplegable.

Ancho: 438 px
Alto: 31 px

lo manejo por pixeles porque así lo tengo por predeterminado, me aconsejas que no lo mida, me das una idea del como? lo llegarías a elaborar. por 1 px se me distorsiona todo ya alcance el numero máximo del tamaño y sigue igual.

[fede5426]

Ya probaste con usar Normalize.css?

Por las dudas, otro dato.. a los ul agregales "margin:0;". Las listas, al igual que otros elementos (como <p></p>), traen por defecto un margen, quizás es eso lo que esta causando tu problema.

Saludos

[wmdiseno]

al parece lo resolví simplemente en vez de dejarlo font-size: en pt lo puse en px y me funciono perfectamente ahora ando con la resolucion de pantalla.

Código CSS:

#header {
        
        
        font-size: 11.6px;
        margin:center;
        width:px;
        height:31.9px;
        font-family:Georgia, "Times New Roman", Times, serif;
        z-index: 0;
        position:relative;
 

Saludos y Bendiciones

gracias por el apoyo!