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!