Menu CSS despliega bien en IE, pero si en FF

[jorgivaz]

Hola, dispongo de un menu CSS con listas (<ul><li.......</ul>).

La cosa esta en que en firefox va todo bien, pero en explorer, no puedo más que seleccionar el primer elemento del desplegable. Me explico con el código:

Código:

<ul>
  <li><a href="/es/pagina/start.html">Inicio</a></li>  <li><a href="#">Cámara</a>    <ul>      <li><a href="/es/pagina/quienes-somos.html">Quienes somos</a></li>      <li><a href="/es/pagina/donde-estamos.html">Donde estamos</a></li>      <li><a href="/es/pagina/servicios.html">Servicios</a></li>    </ul>
  </li>  <li><a href="#">Trabajo</a>
    <ul>      <li><a href="/es/pagina/busco-trabajo.html">Busco trabajo</a></li>
      <li><a href="/es/pagina/ofrezco-trabajo.html">Ofrezco trabajo</a></li>    </ul>
  </li>
</ul>

Cuando me situio encima de Cámara, se me desplegan las opciones, entonces puedo ir a la opción Quienes Somos, pero no a la Donde estamos,entonces se cierra lo desplegado automáticamente.Igual pasa con el menu trabajo, solo puedo acceder a la primera opción.Aquí el código CSS:

Código HTML:

#navbar ul {    margin: 0;    padding: 0;}
#navbar ul li {    list-style: none;   float: left;  border-right: 1px dotted #FFFFFF;  line-height:26px;}
#navbar ul li a {    display: block;    padding: 3px 8px;     text-decoration: none;    color: #FFFFFF;    font-weight: bold; }
#navbar ul li a:hover {    color:#CCCCCC; }
#navbar ul li ul {    display: none;  }
#navbar ul li:hover ul, #navbar li.hover ul {    position: absolute;    /*left: 0;*/ display:block;    width: 150px;    margin: 0;    padding: 0; }
#navbar ul li:hover li, #navbar li.hover li { float:none; background-color:#7BA2CE; line-height:20px;}
#navbar ul li:hover li a, #navbar li.hover li a {    color: #FFFFFF;}
#navbar ul li li a:hover {    color: #FFFFFF; background-color:#003e71;}

Edito: He estado probando y es algo del Z-INDEX con los contenidos que hay debajo del menu. Alguién se le ocurre algo ??

[Mikmoro]

Haz este cambio en tu css. Cambia:

#navbar ul li:hover li, #navbar li.hover li { float:none; background-color:#7BA2CE; line-height:20px;}

Por:

#navbar ul li:hover li, #navbar li.hover li {width: 150px; background-color:#7BA2CE; line-height:20px;}

e incluso yo lo cambiaría por:

#navbar ul li ul li, #navbar li.hover ul li {width: 150px; background-color:#7BA2CE; line-height:20px;