He estado echandole un vistado a los CSS pero no averiguo que pasa; el caso es que bajé de Internet el menú, si eso copio el código de mi menú y los CSS a ver por qué puede ser...los CSS los he ido comentando pero puede que haya algun error.
El HTML:
Código:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="en-us" />
<link rel="stylesheet" type="text/css" href="superfish2.css" />
<link rel="stylesheet" type="text/css" href="superfish-navbar2.css" />
<script src="ZDoble.js"></script>
</head>
<body>
<!-- ****************************************************MENU DOBLE******************************************************-->
<ul id="nav" class="sf-menu sf-navbar">
<li><a href="#">Home</a></li>
<li><a href="#">Videos<span class="sf-sub-indicator"> »</span></a>
<ul class="sf-color">
<li><a href="#">Retransmisiones</a></li>
<li><a href="#">Catálogo</a></li>
<li><a href="#">Búsqueda</a></li>
<li class="sf-menuVacio"><a href="#"> </a></li>
</ul>
</li>
<li><a href="#">Documentación<span class="sf-sub-indicator"> »</span></a>
<ul class="sf-color">
<li><a href="#">Transcripciones</a></li>
<li class="sf-menuVacioTranscripciones"><a href="#"> </a></li>
</ul>
</li>
<li><a href="#">Foro</a></li>
</ul>
</body>
</html>
superfish2.css:
Código:
.sf-menu, .sf-menu * { /*MENU GENERAL, EL ASTERISCO ES PARA LIMPIAR EL MENU*/
margin: 0; /*MARGEN ENTRE LOS ELEMENTOS DEL MENU*/
padding: 0; /*ESPACIO DE RELLENO EN LOS ELEMENTOS DEL MENU*/
list-style: none; /*LIMPIA EL MENU*/
line-height: 1.0; /*ALTURA DE LOS ELEMENTOS DEL MENU*/
}
.sf-menu ul {
position: absolute; /*HACE QUE LOS ELEMENTOS TOMEN LAS MISMAS MEDIDAS Y SE AJUSTEN AL ESPACIO*/
top: -999em; /*ESCONDE LAS OPCIONES DEL SUBMENU FUERA DE LA PAGINA*/
}
.sf-menu li { /*DETALLES MENU HORIZONTAL 1*/
float: left; /*PARA PONER TODOS LOS ELEMENTOS EN HORIZONTAL*/
position: absolute; /*LOS ELEMENTOS OCUPAN TODO EL ESPACIO DISPONIBLE*/
margin-right: 1;
margin-left: 1;
}
.sf-menu a { /*DISEÑO DEL TEXTO DE LOS ELEMENTOS DEL MENU HORIZONTAL 1*/
display: block; /*HACE VISIBLE LOS ELEMENTOS DEL MENU*/
position: relative; /*LOS ELEMENTOS SE REPARTEN OCUPANDO TODO EL ESPACIO DEL MENU*/
}
.sf-menu li:hover ul,li.over ul ,.sf-menu li.sfHover ul { /*MUESTRA EL MENU HORIZONTAL 2 AL PASAR EL RATON*/
left: 0; /*POSICION A LA IZQUIERDA DEL MENU HORIZONTAL 2*/
top: 2.5em; /*POSICION VERTICAL DEL MENU HORIZONTAL 2*/
z-index: 99; /*CAPA EN LA QUE SE SITUA ESTE MENU HORIZONTAL 2*/
}
.sf-menu { /*EXTENSION DEL MENU GENERAL*/
float: left; /*COLOCAMOS LOS ELEMENTOS EN LA POSICION HORIZONTAL*/
margin-bottom: 1em; /*COLOCAMOS LOS ELEMENTOS CENTRADOS EN EL MENU*/
}
.sf-menu a { /*DISEÑO DEL TEXTO DENTRO DE LOS ELEMENTOS*/
border-left: 1px solid #fff; /*BORDE IZQUIERDO DEL ELEMENTO*/
border-top: 1px solid #CFDEFF; /*BORDE SUPERIOR DEL ELEMENTO*/
padding: .75em 1em; /*RELLENO DEL ELEMENTO*/
text-decoration:none; /*QUITAMOS LOS SUBRAYADOS DE LOS TEXTOS*/
}
.sf-menuVacio a { /*Para que el último boton ocupe el resto de la barra horizontal y no desaparezca*/
padding: .0 32.4em; /*RELLENO DEL ELEMENTO*/
background: #e0e7f5;
}
.sf-menuVacioTranscripciones a { /*Para que el último boton ocupe el resto de la barra horizontal y no desaparezca*/
padding: .0 36em; /*RELLENO DEL ELEMENTO*/
background: #e0e7f5;
}
.sf-sub-indicator { /*DISEÑO DE LA FLECHA EN EL ELEMENTO*/
position: absolute; /*LOS ELEMENTOS OCUPAN TODO EL ESPACIO EN EL MENU*/
display: block; /*MUESTRA LOS ELEMENTOS*/
right: .75em; /*POSICIONAMOS EL ELEMENTO A LA DERECHA*/
top: 1.05em; /*POSICIONAMOS EL ELEMENTO ARRIBA*/
width: 9px; /*ANCHURA DEL ELEMENTO*/
height: 10px; /*ALTURA DEL ELEMENTO*/
text-indent: -999em; /*QUITAMOS LAS MARCAS QUE SALEN POR DEFECTO*/
background: url('arrows-ffffff.png') no-repeat -10px -100px; /*IMPORTAMOS LA IMAGEN*/
*top: 0.75em; /*Subir un poco las flechicas*/
}
a > .sf-sub-indicator { /*PERFECCIONAMOS EL POSICIONAMIENTO DE LAS FLECHAS*/
top: .8em; /*POSICION DE ALTURA*/
background-position: 0 -100px; /*POSICION DEL FONDO */
}