Foros del Web

Foros del Web (http://www.forosdelweb.com/)
-   CSS (http://www.forosdelweb.com/f53/)
-   -   Menú desplegable con listas anidadas (http://www.forosdelweb.com/f53/menu-desplegable-con-listas-anidadas-415881/)

AlZuwaga 09/08/2006 12:55

Menú desplegable con listas anidadas
 
Estoy haciendo este menú deplegable (es el 'coso' azul oscuro) con listas anidadas pero -para variar- estoy teniendo un pequeño problema con IE.

Están todos los 'sub-menú' posicionados absolutos (al igual que el '<ul> general') y cada uno tiene un margen izquierdo de 180px, pero IE me toma este margen -aparentemente- desde el final del último caracter del '<li> padre' y no desde el extremo izquierdo de su '<ul> padre' (cosa que si ocurre con FF)

La hoja de estilos es esta http://personal.alzuwaga.com.ar/estilos_tiau.css y los estilos involucrados hasta este momento son:

Código:

#lat_nav {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
        background-color: #003366;
        position: absolute;
        width: 180px;
}
#lat_nav li {
        display: block;
        width: 180px;
        height: 25px;
        line-height: 25px;
}
.lat_nav_1nivel, .lat_nav_2nivel {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
        position: absolute;
        display: none;
        margin-left: 180px;
        margin-top: -25px;
}
.lat_nav_1nivel {
        background-color: #009933;
}
.lat_nav_2nivel {
        background-color: #FF9900;
}


¿Qué puedo hacer para solucionar el problema en IE?

EDIT: Y el html involucrado es este:


Código:

<ul id="lat_nav">
        <li onmouseover="activar_submenu('sub_institucional');" onmouseout="desactivar_submenu('sub_institucional')">Institucional &raquo;
          <ul id="sub_institucional" class="lat_nav_1nivel">
            <li>Objetivos</li>
            <li>Carta Urbana</li>
            <li>Autoridade</li>
          </ul>
        </li>
        <li onmouseover="activar_submenu('sub_invyaccion');" onmouseout="desactivar_submenu('sub_invyaccion')">Investigaci&oacute;n y Acci&oacute;n &raquo;
          <ul id="sub_invyaccion" class="lat_nav_1nivel">
            <li onmouseover="activar_submenu('sub_polurbanas');" onmouseout="desactivar_submenu('sub_polurbanas')">Pol&iacute;ticas Urbanas &raquo;
              <ul id="sub_polurbanas" class="lat_nav_2nivel">
                <li>Tertulias y Debates</li>
                <li>Asesoramiento Ciudadano</li>
                <li>Estudios</li>
                <li>Charlas</li>
                <li>Escuelas Urbanas</li>
              </ul>
            </li>
            <li onmouseover="activar_submenu('sub_culturbana');" onmouseout="desactivar_submenu('sub_culturbana')">Cultura Urbana &raquo;
              <ul id="sub_culturbana" class="lat_nav_2nivel">
                <li>Recorridos</li>
                <li>XXX</li>
              </ul>
            </li>
            <li onmouseover="activar_submenu('sub_conurbana');" onmouseout="desactivar_submenu('sub_conurbana')">Conciencia Urbana &raquo;
              <ul id="sub_conurbana" class="lat_nav_2nivel">
                <li>1</li>
                <li>2</li>
              </ul>
            </li>
          </ul>
        </li>
        <li onmouseover="activar_submenu('sub_difycom');" onmouseout="desactivar_submenu('sub_difycom')">Difusi&oacute;n y Comunicaci&oacute;n &raquo;
          <ul id="sub_difycom" class="lat_nav_1nivel">
            <li>Programas Radiales</li>
            <li onmouseover="activar_submenu('sub_publicaciones');" onmouseout="desactivar_submenu('sub_publicaciones')">Publicaciones &raquo;
              <ul id="sub_publicaciones" class="lat_nav_2nivel">
                <li>Cuadernos TIAU</li>
                <li>La ciudad y no s&eacute; que cosa</li>
                <li>Art&iacute;culos</li>
                <li>Libros</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>


AlZuwaga 09/08/2006 12:59

(ya que estamos... ¿que "les dice", en una primera impresión, el 2do ícono del menú superior?)

AlZuwaga 09/08/2006 14:32

Solución:

Código:

.lat_nav_1nivel, .lat_nav_2nivel {
        left: 0;
        margin: 0px;
        padding: 0px;
        list-style-type: none;
        position: absolute;
        display: none;
        margin-left: 180px;
/*        margin-top: -25px; PARA FF*/
/*        margin-top: -6px; PARA IE*/
}


EDIT: No había probado con left porque imagine que, al estar osicionados absolutos, se me colocarían las listas a 180 px desde el extremo de la pantalla del navegador (del body, vamos)

webosiris 09/08/2006 14:37

hola Al, a tu menú le veo un fallo de accesibilidad ya que depende de js para que funcione... actualmente se pueden hacer muy buenas cosas con CSS puro, usando la pseudo-class :hover

AlZuwaga 09/08/2006 14:49

Hola weobsiris, pensé en ello, pero desistí de hacerlo fully css devido a que IE no interpreta el :hover en 'otra cosa' que no sea un enlace. Y no todos los elementos de las listas son enlaces. Justamente no son enlaces los <li> que despliegan un submenú. Entonces.. ¿pondría un enlace que lleve a ningún lado?

webosiris 09/08/2006 15:06

podrías poner enlaces con href="#"... si, se que no es lo más recomendable, pero se trata de ver que es lo "menos pior"..


La zona horaria es GMT -6. Ahora son las 09:24.

Desarrollado por vBulletin® Versión 3.8.7
Derechos de Autor ©2000 - 2026, Jelsoft Enterprises Ltd.