Menu horizontal en Firefox

[vanilore]

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}

[kseso?]

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

[vanilore]

Gracias kseso?
Ya estoy viendo lo que me recomendaste.
Gracias de nuevo!
Sldos.

[vanilore]

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>

[vanilore]

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 */

[Mikmoro]

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.