Menú desplegable con listas anidadas

AlZuwaga · #1 (**permalink**) 09/08/2006, 12:55

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 · #2 (**permalink**) 09/08/2006, 12:59

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

AlZuwaga · #3 (**permalink**) 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 · #4 (**permalink**) 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 · #5 (**permalink**) 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 · #6 (**permalink**) 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"..