Foros del Web » Creando para Internet » CSS »

Menu horizontal en Firefox

Estas en el tema de Menu horizontal en Firefox en el foro de CSS en Foros del Web. Hola: Tengo un menu horinzontal con un submenu desplegable, que funciona bien en IE, pero en Firefox no. En Firefox cuando uno pasa el mouse ...
  #1 (permalink)  
Antiguo 28/10/2009, 16:20
 
Fecha de Ingreso: octubre-2009
Mensajes: 4
Antigüedad: 8 años, 1 mes
Puntos: 0
Menu horizontal en Firefox

Hola:
Tengo un menu horinzontal con un submenu desplegable, que funciona bien en IE, pero en Firefox no. En Firefox cuando uno pasa el mouse sobre los diferentes botones, el submenu queda como colgado y no va cambiando en los diferentes submenus, cosa que si realiza el IE. Espero se entienda mi inquietud. Les dejo el CSS. Gracias. Vanina


Codigo:
<div id="menu"><span class="menu">
<ul>
<li><a href="index.php">| Qui&eacute;nes somos? |</a></li>
<li><a href="#.php">Servicios |</a>
<ul>
<li><a href="prevencion.php">Prevenci&oacute;n &middot;</a></li>
<li><a href="asistencia.php">Asistencia &middot;</a></li>
<li><a href="docencia.php">Docencia</a></li>
</ul>
</li>
<li><a href="#">Modalidades de Tratamiento |</a>
<ul>
<li><a href="tratamiento.php">Tratamiento Ambulatorio &middot;</a></li>
<li><a href="tratamiento.php#1">Hospital de D&iacute;a &middot;</a></li>
<li><a href="tratamiento.php#2">Centro de Noche &middot;</a></li>
<li><a href="tratamiento.php#3">Programa Residencial &middot;</a></li>
<li><a href="tratamiento.php#4">Tratamiento Familiar</a></li>
</ul>
</li>
<li><a href="staff.php">Staff |</a></li>
<li><a href="#">Galer&iacute;a de Im&aacute;genes |</a>
<ul>
<li><a href="galeria_alh2.php"><span class="menu">. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . </span>La Alhambrita Quilmes &middot;</a></li>
<li><a href="galeria_alh1.php">&middot; La Alhambrita Berazategui</a></li>
</ul>
</li>
<li><a href="#">C&oacute;mo llegar? |</a>
<ul>
<li><a href="mapa_alh2.php"><span class="menu">. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . </span>La Alhambrita Quilmes &middot;</a></li>
<li><a href="mapa_alh1.php">&middot; La Alhambrita Berazategui</a></li>
</ul>
</li>
<li><a href="contacto.php">Contacto |</a></li>
</ul>
</span>
</div>


/* Css Menu */
#menu { font-family:Verdana, sans-serif; clear:both; width: 899px; height:55px; background:url(../imagenes/fondo_menu2.jpg) no-repeat; padding-left: 40px; padding-top: 5px}

#menu ul {clear:both; height:20px; margin: 0; padding: 0; list-style: none; line-height:normal; font-weight: bold}

#menu li {display: inline; list-style: none; float: left; width: auto;}

#menu a { display: inline; float: left; margin: 0; padding: 10px 5px; font-size: 12px; font-weight: 100; color:#009900; font-weight: bold; text-decoration: none; width: auto; }

#menu li a { display: inline; text-decoration: none; }

#menu li li a { font-size:11px; letter-spacing:0px; }

#menu a:hover { color: #000000; font-weight:bold; }

#menu li ul { display: none; }

#menu li:hover ul, #menu li.hover ul {
position: absolute;
display: inline;
left: 0;
width: 75%; margin-left:110px;
padding: 35px; }

#menu li:hover li, #menu li.hover li {
float: left; width:auto }

#menu li:hover li a, #menu li.hover li a {
color: #000 }

#menu li li a:hover {
color: #009900; }

.menu { width:auto; color:#CCCCCC}
  #2 (permalink)  
Antiguo 28/10/2009, 17:30
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Menu horizontal en Firefox

Hola Vanilore
Así, en un vistazo rçapido y superficial, creo que tienes unos cuantos errores de concepto, entre otros el alojar el menú en un "span" y algunas de las declaraciones del css no son las más apropiadas (ello te obliga a utilizar una línea muuuuuy larga de puntos para llevar a su sitio las opciones de 2º nivel).
Y en ie7 se pierde el foco antes de alcanzar el segundo nivel, por lo que no se podrá seleccionar las opciones.
También tengo la impresión de que no funcionará en ie6 (al menos con el cógido que publicaste).

Mejor que intentar corregir esos códigos, pasa por las faq's de css, fíjate en los menús de Mikmoro, o pasa por su página www.araudi.net
Creo que éste ejemplo se adapta a lo que muestras.

Un saludo y bienvenido/a a fdw
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 29/10/2009, 07:28
 
Fecha de Ingreso: octubre-2009
Mensajes: 4
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Menu horizontal en Firefox

Gracias kseso?
Ya estoy viendo lo que me recomendaste.
Gracias de nuevo!
Sldos.
  #4 (permalink)  
Antiguo 29/10/2009, 10:54
 
Fecha de Ingreso: octubre-2009
Mensajes: 4
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Menu horizontal en Firefox

Gracias! Me ha servido de mucho.
Una unica duda que no logro despejar, por mas que lo intento.
El submenu de GALERIA DE IMAGENES
<div id="menu">
<ul>


<li class="nivel1"><a href="#" class="nivel1"> Quienes Somos </a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
</li>


<li class="nivel1"><a href="#" class="nivel1">Servicios</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Servicios<table class="falsa"><tr><td><![endif]-->
<ul class="dos">
<li><a href="prevencion.php">&middot; Prevencion &middot;</a></li>
<li><a href="sistencia.php">&middot; Asistencia &middot;</a></li>
<li><a href="docencia.php">&middot; Docencia &middot;</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


<li class="nivel1"><a href="#" class="nivel1">Modalidades de Tratamiento</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Modalidades de Tratamiento<table class="falsa"><tr><td><![endif]-->
<ul class="tres">
<li><a href="tratamiento.php">&middot; Tratamiento Ambulatorio &middot;</a></li>
<li><a href="tratamiento.php#1">&middot; Hospital de Dia &middot;</a></li>
<li><a href="tratamiento.php#2">&middot; Centro de Noche &middot;</a></li>
<li><a href="tratamiento.php#3">&middot; Programa Residencial &middot;</a></li>
<li><a href="tratamiento.php#4">&middot; Tratamiento Familiar &middot;</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


<li class="nivel1"><a href="staff.php" class="nivel1">Staff</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Staff<table class="falsa"><tr><td><![endif]-->
</li>


<li class="nivel1"><a href="#" class="nivel1">Galeria de Imagenes</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Galeria de Imagenes<table class="falsa"><tr><td><![endif]-->
<ul class="cinco">
<li><a href="galeria_alh2.php">&middot; La Alhambrita Quilmes &middot;</a></li>
<li><a href="galeria_alh1.php">&middot; La Alhambrita Berazategui &middot;</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


<li class="nivel1"><a href="#" class="nivel1">Como llegar</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Galeria de Imagenes<table class="falsa"><tr><td><![endif]-->
<ul class="seis">
<li><a href="mapa_alh2.php">&middot; La Alhambrita Quilmes &middot;</a></li>
<li><a href="mapa_alh1.php">&middot; La Alhambrita Berazategui &middot;</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>


<li class="nivel1"><a href="contacto.php" class="nivel1">Contacto </a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Staff<table class="falsa"><tr><td><![endif]-->
</li>

</ul>
</div>
  #5 (permalink)  
Antiguo 29/10/2009, 10:55
 
Fecha de Ingreso: octubre-2009
Mensajes: 4
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: Menu horizontal en Firefox

Gracias! Me ha servido de mucho.
Una unica duda que no logro despejar, por mas que lo intento.
Los submenu de GALERIA DE IMAGENES Y COMO LLEGAR, quedan sobre la izquierda, y me gustaria que queden debajo del boton sobre la derecha.
Gracias de nuevo!

CODIGO
<div id="menu">
<ul>
<li class="nivel1"><a href="#" class="nivel1"> Quienes Somos </a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Servicios</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Servicios<table class="falsa"><tr><td><![endif]-->
<ul class="dos">
<li><a href="prevencion.php">&middot; Prevencion &middot;</a></li>
<li><a href="sistencia.php">&middot; Asistencia &middot;</a></li>
<li><a href="docencia.php">&middot; Docencia &middot;</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Modalidades de Tratamiento</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Modalidades de Tratamiento<table class="falsa"><tr><td><![endif]-->
<ul class="tres">
<li><a href="tratamiento.php">&middot; Tratamiento Ambulatorio &middot;</a></li>
<li><a href="tratamiento.php#1">&middot; Hospital de Dia &middot;</a></li>
<li><a href="tratamiento.php#2">&middot; Centro de Noche &middot;</a></li>
<li><a href="tratamiento.php#3">&middot; Programa Residencial &middot;</a></li>
<li><a href="tratamiento.php#4">&middot; Tratamiento Familiar &middot;</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="staff.php" class="nivel1">Staff</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Staff<table class="falsa"><tr><td><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Galeria de Imagenes</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Galeria de Imagenes<table class="falsa"><tr><td><![endif]-->
<ul class="cinco">
<li><a href="galeria_alh2.php">&middot; La Alhambrita Quilmes &middot;</a></li>
<li><a href="galeria_alh1.php">&middot; La Alhambrita Berazategui &middot;</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1">Como llegar</a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Galeria de Imagenes<table class="falsa"><tr><td><![endif]-->
<ul class="seis">
<li><a href="mapa_alh2.php">&middot; La Alhambrita Quilmes &middot;</a></li>
<li><a href="mapa_alh1.php">&middot; La Alhambrita Berazategui &middot;</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="contacto.php" class="nivel1">Contacto </a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">Staff<table class="falsa"><tr><td><![endif]-->
</li>
</ul>
</div>

CSS
/* Menu */

#menu { margin-left: 11px; text-align: center; font-family:Verdana, sans-serif;
font-size: 1em;
width: 899px;
position: relative; }

#menu ul { list-style-type: none;}

#menu ul li.nivel1 { float: left;
width: auto;
position: relative; }

#menu ul li { float: left;}

#menu ul li a {display: block; background-color:#FFFFFF;
text-decoration: none;
color: #000000;
border: solid 1px #fff;
padding: 8px 13px 8px 12px;
position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #FFFFFF;
color: #009900;
position: relative;
border-bottom: solid 1px #FFFFFF;
}
#menu ul li a.nivel1 {display: block!important;display: none;
}
#menu ul li ul {display: none;}

#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute; width: 899px; border-top: none; }

#menu ul li ul li a {width: auto; font-size: 0.9em;
padding: 6px 0px 8px 0px;
border: none;
background-color: #CCCCCC;
}
#menu ul li ul li a:hover {
position: relative;
text-decoration: none;
border-bottom: none;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
ul.uno {left: -0px;}
ul.dos {left: -100px;}
ul.tres {left: -200px;}
ul.cuatro {left: -300px;}
ul.cinco {left: -492px;}
ul.seis {left: -656px;}

/* Menu fin */

Última edición por vanilore; 29/10/2009 a las 11:06
  #6 (permalink)  
Antiguo 29/10/2009, 13:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu horizontal en Firefox

Quizá no te has percatado, pero se están usando varios elementos de lista vacíos para relleno y que la listsa no empiece siempre a la izquierda:

<ul class="cinco">
<li><a href="#"></a></li>
<li><a href="#"></a></li>

<li><a href="#">Opción 5.1</a></li>
<li><a href="#">Opción 5.2</a></li>
<li><a href="#">Opción 5.3</a></li>
</ul>

Sólo están ahí para eso.
__________________
Visita mi nueva web idplus.org
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 11:56.