Buenas.
En primer lugar agradecer a los usuarios de este foro que me han ayudado bastante. Soy muy novato en cuanto a programación, este es el primer proyecto que realizo y me encuentro atascado en un problema de compatibilidad en un menu desplegable. En Firefox se ve tal y como quiero, pero en otros navegadores que también probé como Safari, Chrome o IE no logró que surja igual.
Lo podeis ver en esta imágenes:
Firefox:
[URL="http://www.fileden.com/files/2010/12/6/3032410//navegadobien.jpg"] http://www.fileden.com/files/2010/12/6/3032410//navegadobien.jpg[/URL]
Los otros navegadores:
[URL="http://www.fileden.com/files/2010/12/6/3032410//navegadormal.jpg"] http://www.fileden.com/files/2010/12/6/3032410//navegadormal.jpg[/URL]
En la lista desplegable de la segunda imagen se ve como los objetos ("fotos" y "videos") se ven más desplazados hacia arriba, aparte de que la flecha que coloqué se descoloca.
Los códigos del navegador y la lista son los siguientes (es posible que haya cosas innecesarias y se note mi innexperiencia xD):
Estilo CSS:
Código CSS:
Ver original#navegador ul {
width:100%;
height:25px;
background-color:#000;
margin-top:0px;
}
#navegador li {
display:block;
position:relative;
float:left;
list-style:none;
}
#navegador li a {
font-family:arial;
font-weight:bold;
font-size:13px;
text-decoration:none;
color:#FFF;
padding-left:10px;
padding-right:10px;
background-color:#000;
}
#navegador li a:hover {
padding-bottom:6px;
padding-top:3px;
padding-right:10px;
padding-left:10px;
background-color:#999;
}
#navegador li ul{
position:absolute;
list-style-type:none;
display:none;
float:left;
margin-left:-170px;
padding-left:170px;
margin-top:5px;
}
#navegador li:hover ul, #navegador li.hover ul {
display:block;
width:9000px;
float:left;
background-color:#CCC;
height:15px;
}
#navegador li ul li{
margin-top:-4px;
padding-right:0px;
margin-left:0px;
}
#navegador li ul li a {
font-family:arial;
font-weight:lighter;
font-size:75%;
color:#1e6060;
background-color:#CCC;
}
#navegador li ul li a:hover, #navegador li ul li a.hover {
padding-right: -2px;
padding-left:-2px;
padding-top:0px;
padding-bottom:0px;
background-color:#AAA;
}
#navegador ul li ul span.nosotros {
background:url(images/flechanav.png);
margin-left:-425px;
margin-top:-5px;
width: 20px;
height: 10px;
position: absolute;
}
#navegador ul li ul span.galeria {
background:url(images/flechanav.png);
margin-left:-95px;
margin-top:-5px;
width: 20px;
height: 10px;
position: absolute;
}
#navegador li.foros a{
color:#FF3;
}
#navegador li.foros a:hover{
color:#CCC;
background-color:#000;
}
Lista HTML:
Código HTML:
Ver original <li><a href="index.php?pagina=inicio">Inicio
</a></li> <li><a href="index.php?pagina=nosotros">Nosotros
</a> <li><a href="index.php?pagina=inicio">Dreams
</a></li> <li><a href="index.php?pagina=inicio">Basem
</a></li> <li><a href="index.php?pagina=inicio">Tango
</a></li> <li><a href="index.php?pagina=inicio">BPA
</a></li> <li><a href="index.php?pagina=inicio">Chumy
</a></li> <li><a href="index.php?pagina=inicio">BAT
</a></li> <li><a href="index.php?pagina=inicio">Lil Monkey
</a></li> <li><a href="index.php?pagina=inicio">TIK
</a></li> <li><a href="index.php?pagina=galeria">Galeria
</a> <li><a href="index.php?pagina=inicio">Fotos
</a></li> <li><a href="index.php?pagina=inicio">Videos
</a></li> <li><a href="index.php?pagina=agradecimientos">Agradecimientos
</a></li> <li class="foros"><a href="#">Foros
</a></li>
Esta es mi duda... por el momento. He estado buscando por todas partes pero en ningún sitio encuentro la solución. Como ya he dicho soy novato y cojo información de aquí y de allí, pero siempre redactando la codificación desde cero, por lo que pido perdón si lo que he mostrado es un desastre, y espero que puedan ayudarme.
Gracias :). Saludos! (y felices fiestas!).