Foros del Web » Creando para Internet » CSS »

!Ayuda con un menu en css¡

Estas en el tema de !Ayuda con un menu en css¡ en el foro de CSS en Foros del Web. Hola, tengo un problema con mi menu, en IE se visualiza bien pero en Firefox se visualiza Mal y no puedo dar con la solución ...
  #1 (permalink)  
Antiguo 10/11/2009, 21:46
 
Fecha de Ingreso: noviembre-2009
Mensajes: 4
Antigüedad: 8 años, 1 mes
Puntos: 0
Pregunta !Ayuda con un menu en css¡

Hola, tengo un problema con mi menu, en IE se visualiza bien pero en Firefox se visualiza Mal y no puedo dar con la solución
El menu es de fondo negro con letras blancas, al hacer li:hover se torna naranja y en galería depliega un sub menu que al hacer a:hover cambia a gris.
Muchas gracias por tu ayuda
Aqui va el código

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


CÓDIGO 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;
}
  #2 (permalink)  
Antiguo 11/11/2009, 06:47
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: !Ayuda con un menu en css¡

Hola, de primera vista, y en opnión de un novato como yo, el menu que tienes es una patada en toda regla a lo que dicen los manuales de como se debe hacer ubn menu desplegable.

Para empezar, tienes dos deficiones de #menu, y aunque veo que no se contradicen, debes agruparlas en una sola. También veo que el lio lo tienes montado porque defines un
Código HTML:
#menu li:hover {}
y entiendo que no es necesario, creo que debe ir sobre #menu li a:hover {}

Te paso u par de enlaces sobre menus interesantes...

librosweb.es/css/capitulo9/estilos_avanzados2.html
araudi.net/ejemplos/menus_desplegables_CSS.html

Saludos¡¡
  #3 (permalink)  
Antiguo 11/11/2009, 13:07
 
Fecha de Ingreso: noviembre-2009
Mensajes: 4
Antigüedad: 8 años, 1 mes
Puntos: 0
Respuesta: !Ayuda con un menu en css¡

Impostor, muchas gracias, ya mismo estoy probando y pongo en resultado
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 03:41.