Problema compatibilidad

[alexwdreams]

Buenas.

En primer lugar agradecer a los usuarios de este foro que me han ayudado bastante. Soy muy novato en cuanto a programación, este es el primer proyecto que realizo y me encuentro atascado en un problema de compatibilidad en un menu desplegable. En Firefox se ve tal y como quiero, pero en otros navegadores que también probé como Safari, Chrome o IE no logró que surja igual.

Lo podeis ver en esta imágenes:
Firefox:
[URL="http://www.fileden.com/files/2010/12/6/3032410//navegadobien.jpg"] http://www.fileden.com/files/2010/12/6/3032410//navegadobien.jpg[/URL]
Los otros navegadores:
[URL="http://www.fileden.com/files/2010/12/6/3032410//navegadormal.jpg"] http://www.fileden.com/files/2010/12/6/3032410//navegadormal.jpg[/URL]

En la lista desplegable de la segunda imagen se ve como los objetos ("fotos" y "videos") se ven más desplazados hacia arriba, aparte de que la flecha que coloqué se descoloca.

Los códigos del navegador y la lista son los siguientes (es posible que haya cosas innecesarias y se note mi innexperiencia xD):
Estilo CSS:

Código CSS:

#navegador ul {
    width:100%;
    height:25px;
    background-color:#000;
    margin-top:0px;
}
#navegador li {
    display:block;
    position:relative;
    float:left;
    list-style:none;
 
}
#navegador li a {
    font-family:arial;
    font-weight:bold;
    font-size:13px;
    text-decoration:none;
    color:#FFF;
    padding-left:10px;
    padding-right:10px;
    background-color:#000;
}
#navegador li a:hover {
    padding-bottom:6px;
    padding-top:3px;
    padding-right:10px;
    padding-left:10px;
    background-color:#999;
}
#navegador li ul{
    position:absolute;
    list-style-type:none;
    display:none;
    float:left;
    margin-left:-170px;
    padding-left:170px;
    margin-top:5px;
}
 
#navegador li:hover ul, #navegador li.hover ul {
    display:block;
    width:9000px;
    float:left;
    background-color:#CCC;
    height:15px;
    
}
#navegador li ul li{
    margin-top:-4px;
    padding-right:0px;
    margin-left:0px;
}
 
#navegador li ul li a {
    font-family:arial;
    font-weight:lighter;
    font-size:75%;
    color:#1e6060;
    background-color:#CCC;
}
#navegador li ul li a:hover, #navegador li ul li a.hover {
        padding-right: -2px;
        padding-left:-2px;
        padding-top:0px;
        padding-bottom:0px;
        background-color:#AAA;
}
#navegador ul li ul span.nosotros {
     background:url(images/flechanav.png);
     margin-left:-425px;
     margin-top:-5px;
     width: 20px;
     height: 10px;
     position: absolute;
} 
#navegador ul li ul span.galeria {
     background:url(images/flechanav.png);
     margin-left:-95px;
     margin-top:-5px;
     width: 20px;
     height: 10px;
     position: absolute;
} 
#navegador li.foros a{
    color:#FF3;
}
#navegador li.foros a:hover{
    color:#CCC;
    background-color:#000;
}
 

Lista HTML:

Código HTML:

<div id="navegador">
       <ul>
         <li><a href="index.php?pagina=inicio">Inicio</a></li>
         <li><a href="index.php?pagina=nosotros">Nosotros</a>
            <ul><span class="nosotros"></span>
               <li><a href="index.php?pagina=inicio">Dreams</a></li>
               <li><a href="index.php?pagina=inicio">Basem</a></li>
               <li><a href="index.php?pagina=inicio">Tango</a></li>
               <li><a href="index.php?pagina=inicio">BPA</a></li>
                <li><a href="index.php?pagina=inicio">Chumy</a></li>
               <li><a href="index.php?pagina=inicio">BAT</a></li>
               <li><a href="index.php?pagina=inicio">Lil Monkey</a></li>
                <li><a href="index.php?pagina=inicio">TIK</a></li>
            </ul>   
         </li>      
         <li><a href="index.php?pagina=galeria">Galeria</a>
             <ul><span class="galeria"></span>
               <li><a href="index.php?pagina=inicio">Fotos</a></li>
               <li><a href="index.php?pagina=inicio">Videos</a></li>
            </ul>  
         </li>
         <li><a href="index.php?pagina=agradecimientos">Agradecimientos</a></li>
         <li class="foros"><a href="#">Foros</a></li>
      </ul>
  </div>
 

Esta es mi duda... por el momento. He estado buscando por todas partes pero en ningún sitio encuentro la solución. Como ya he dicho soy novato y cojo información de aquí y de allí, pero siempre redactando la codificación desde cero, por lo que pido perdón si lo que he mostrado es un desastre, y espero que puedan ayudarme.

Gracias :). Saludos! (y felices fiestas!).