¡Problemas para ver Menu en css en firefox!

kenpachisama · #1 (**permalink**) 05/11/2009, 16:25

Hola a todos, soy nuevo en esto y quería saber si me podrían ayudar con un menu despleglable en css que hice, el problema es que en IE lo puedo visualizar bien, pero en el firefox se ve mal

este es el menu

<div id="menu">
<ul>
<li class="active first"><a href='index.html'>INICIO</a></li>
<li><a href="#" title="">GALERIAS</a></li>
<ul class="submenu">
<li class="cat-item"><a href='galeria_1.html'>Galería 2000 2009</a></li>
<li class="cat-item"><a href='galeria_2.html'>Galería Ovejas</a></li>
<li class="cat-item"><a href='galeria_3.html'>Galería 1990 2000</a></li>
<li class="cat-item"><a href='galeria_4.html'>Cajas Eróticas</a></li>
<li class="cat-item"><a href='galeria_5.html'>Vestuarios</a></li>
<li class="cat-item"><a href='galeria_6.html'>Objetos</a></li>

</ul>

<li><a href='curriculum.html'>CURRICULUM</a></li>
<li><a href='contacto.html'>CONTACTO</a></li>
</ul>
</div>

y este es el codigo css

#menu {
position:relative;
margin:0 auto;
margin-top:15px;
padding:0px 10px;
text-transform:uppercase;
border-top:2px solid #f25e00;

}

#menu {
background-color:#000;
width:850px;
display: block;
}

#menu ul {
list-style: none;
display: block;
}

#menu li {
float:left;
list-style:none;
cursor: pointer;
display: block;
border-right:1px solid #333;
}

#menu li:hover {

background: #f25e00;

}

#menu .first a {
border: none;

}

#menu .active a {
color: #FFFFFF;
}

#menu a, #menu a:visited {
margin: 0px;
padding:10px 16px;
font-weight:bold;
color:#FFF;
display:block;
}

#menu a:hover {

text-decoration:none;

display:block;

}

#menu li {
float: left;
margin: 0px;
padding: 0px;
display: block;
}

#menu li li {
float: left;
margin: 0px;
padding: 0px;
width: 122px;
text-transform:none;
display: block;
}

#menu li li a, #menu li li a:link, #menu li li a:visited {
background: #2B2B2B;
width: 122px;
float: none;
margin: 0px;
padding: 5px 10px 5px 18px;
border-top: 1px solid #C0C0C0;
display: block;

}

#menu li li a:hover, #menu li li a:active {

background: #666666;

padding: 5px 10px 5px 18px;

}

#menu li ul {
position: absolute;
width: 10em;
left: -999em;
display: block;
}

#menu li:hover ul {

left: auto;

display: block;

}

#menu li:hover ul, #menu li.sfhover ul {
left: auto;
display: block;
}

Les agradezco mucho son una masa.

AlePerez92 · #2 (**permalink**) 05/11/2009, 17:19

Hola! He probado el código y el menú se ve todo blanco excepto la línea negra del borde, eso tanto en Firefox como en IE. Al pasar el ratón cambia el fondo a naranja y las letras a blanco... ¿Es así como tú lo quieres? Explica mejor...

kenpachisama · #3 (**permalink**) 05/11/2009, 17:51

esta es una url temporal donde esta alojada la página, ahi se visualiza bien en IE y en firefox yo tambien lo veo como lo ves vos.
En realidad el menu es de fondo negro con letras blancas, al hacer mouseover se torna naranja y en galería depliega un sub menu que al hacer mouseover cambia a gris.
Muchas gracias por tu ayuda
por si hubo algún error lo posteo nuevamente

<body>
<div id="menu">
<ul>
<li class="active first"><a href='index.html'>INICIO</a></li>
<li><a href="#" title="">GALERIAS</a></li>
<ul class="submenu">
<li class="cat-item"><a href='galeria_1.html'>Galería 2000 2009</a></li>
<li class="cat-item"><a href='galeria_2.html'>Galería Ovejas</a></li>
<li class="cat-item"><a href='galeria_3.html'>Galería 1990 2000</a></li>
<li class="cat-item"><a href='galeria_4.html'>Cajas Eróticas</a></li>
<li class="cat-item"><a href='galeria_5.html'>Vestuarios</a></li>
<li class="cat-item"><a href='galeria_6.html'>Objetos</a></li>

</ul>

<li><a href='curriculum.html'>CURRICULUM</a></li>
<li><a href='contacto.html'>CONTACTO</a></li>
</ul>
</div>
</body>

codigo css

#menu {
position:relative;
margin:0 auto;
margin-top:15px;
padding:0px 10px;
text-transform:uppercase;
border-top:2px solid #f25e00;

}

#menu {
background-color:#000;
width:850px;
display: block;
}

#menu ul {
list-style: none;
display: block;
}

#menu li {
float:left;
list-style:none;
cursor: pointer;
display: block;
border-right:1px solid #333;
}

#menu li:hover {

background: #f25e00;

}

#menu .first a {
border: none;

}

#menu .active a {
color: #FFFFFF;
}

#menu a, #menu a:visited {
margin: 0px;
padding:10px 16px;
font-weight:bold;
color:#FFF;
display:block;
}

#menu a:hover {

text-decoration:none;

display:block;

}

#menu li {
float: left;
margin: 0px;
padding: 0px;
display: block;
}

#menu li li {
float: left;
margin: 0px;
padding: 0px;
width: 122px;
text-transform:none;
display: block;
}

#menu li li a, #menu li li a:link, #menu li li a:visited {
background: #2B2B2B;
width: 122px;
float: none;
margin: 0px;
padding: 5px 10px 5px 18px;
border-top: 1px solid #C0C0C0;
display: block;

}

#menu li li a:hover, #menu li li a:active {

background: #666666;

padding: 5px 10px 5px 18px;

}

#menu li ul {
position: absolute;
width: 10em;
left: -999em;
display: block;
}

#menu li:hover ul {

left: auto;

display: block;

}

#menu li:hover ul, #menu li.sfhover ul {
left: auto;
display: block;
}