Foros del Web » Creando para Internet » CSS »

¡Problemas para ver Menu en css en firefox!

Estas en el tema de ¡Problemas para ver Menu en css en firefox! en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/11/2009, 16:25
 
Fecha de Ingreso: noviembre-2009
Mensajes: 4
Antigüedad: 8 años, 1 mes
Puntos: 0
¡Problemas para ver Menu en css en firefox!

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.
  #2 (permalink)  
Antiguo 05/11/2009, 17:19
Avatar de AlePerez92  
Fecha de Ingreso: noviembre-2009
Ubicación: España
Mensajes: 17
Antigüedad: 8 años, 1 mes
Puntos: 2
De acuerdo Respuesta: ¡Problemas para ver Menu en css en firefox!

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...
  #3 (permalink)  
Antiguo 05/11/2009, 17:51
 
Fecha de Ingreso: noviembre-2009
Mensajes: 4
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: ¡Problemas para ver Menu en css en firefox!

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;
}
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 09:07.