Foros del Web » Creando para Internet » CSS »

Menú desplegable con listas anidadas

Estas en el tema de Menú desplegable con listas anidadas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 09/08/2006, 13:55
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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>
__________________
...___...

Última edición por AlZuwaga; 09/08/2006 a las 14:10
  #2 (permalink)  
Antiguo 09/08/2006, 13:59
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
(ya que estamos... ¿que "les dice", en una primera impresión, el 2do ícono del menú superior?)
__________________
...___...
  #3 (permalink)  
Antiguo 09/08/2006, 15:32
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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)
__________________
...___...
  #4 (permalink)  
Antiguo 09/08/2006, 15:37
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
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
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #5 (permalink)  
Antiguo 09/08/2006, 15:49
Avatar de AlZuwaga
Colaborador
 
Fecha de Ingreso: febrero-2001
Ubicación: 34.517 S, 58.500 O
Mensajes: 14.550
Antigüedad: 16 años, 9 meses
Puntos: 535
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?
__________________
...___...
  #6 (permalink)  
Antiguo 09/08/2006, 16:06
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
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"..
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




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