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