Hola he creado un menú horizontal con CSS pero no consigo aplicar el estilo que quiero...
Este es el diseño, si os fijais en el paso 3, giro cambia de rosa a color naranja como sucede en el paso 1 al navegar por las subpestañas, no encuentro el error!
Mas abajo adjunto el código...
Esta es la parte del ménu HTML que contiene Giro, como veis a <code>
<li></code> le he aplicado una clase para Giro.
Código HTML:
<body>
<div id='menuWrapper'>
<div class='menu'>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">UCI WORLD TOUR</a>
<ul>
<li><a href="#">NOTICIAS</a></li>
<li><a href="#">CALENDARIO</a></li>
<li><a href="#">RANKING UCI</a></li>
<li><a href="#">EQUIPOS PROFESIONALES</a></li>
<li><a href="#">FICHAJES</a></li>
</ul>
</li>
<li class="giro"><a href="#">GIRO ITALIA</a>
<ul>
<li><a href="#">NOTICIAS</a></li>
<li><a href="#">RECORRIDO</a></li>
<li><a href="#">PERFILES DE ETAPA</a></li>
<li><a href="#">CLASIFICACIÓN ETAPAS</a></li>
<li><a href="#">CLASIFICACIÓN GENERAL</a></li>
<li><a href="#">FAVORITOS</a></li>
<li><a href="#">VER ONLINE</a></li>
<li><a href="#">PALMARÉS</a></li>
</ul>
</li> Este es el CSS únicamente para Giro:
Código CSS:
Ver original/********************** GIRO ************************/
.menu li.giro a { background: #000; color: #F9F;} /* FONDO */
.menu li.giro ul { background: #000; /* Color de fondo del submenú */}
.menu li.giro ul.giro a:hover, .menu li.giro ul.giro li:hover a{
background: #F9F; /* Color de las subpestañas al pasar el cursor */
color: #000;
}
.menu li.giro:hover li a {
color: #F9f; /* COLOR TEXTO SUBMENÚ */}
.menu li.giro a:hover, .menu ul li.giro li:hover a {
background: #F9f; /* COLOR de las pestañas al pasar el cursor */
color: #000; /* COLOR del texto al pasar el cursor */
}
/********************** FGIRO **********************/
Y este es el CSS completo:
Código CSS:
Ver original#menuWrapper {
width:100%; /* Ancho del menú */
height:33px;
padding-left:15px;
background: #000; /* Color de fondo */
}
.menu {
width: 100%;
float: left;
font-family: "Lucida Grande", sans-serif,sans-serif;
font-size:11px; /* Tamaño de la fuente */
}
.menu ul {
float:left;
height:0px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background: #000; /* COLOR DE FONDO */
color: #F90; /* COLOR FUENTE */
display:block;
font-weight:normal;
line-height:33px; /* Altura */
margin:0px;
padding:0px 15px; /* Espacio entre cada pestaña */
text-align:center;
text-decoration:none;
font-weight:bold;
}
.menu li a:hover {
background: #F90; /* COLOR de las pestañas al pasar el cursor */
color: #000; /* COLOR del texto al pasar el cursor */
text-decoration:none;
}
/******************/
.menu ul li:hover a {
background: #F90; /* COLOR de las pestañas al pasar el cursor */
color: #000; /* COLOR del texto al pasar el cursor */
text-decoration:none;
}
.menu li ul {
background: #000; /* Color de fondo del submenú */
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:200px; /* Ancho del submenú */
z-index:100;
border-top:1px solid #000; /* Borde superior del submenú */
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.menu li:hover li a {
color: #F90; /* COLOR TEXTO SUBMENÚ */
background:none;
border: solid 1px #000;
}
.menu li ul a {
display:block;
height:33px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background: #F90; /* Color de las subpestañas al pasar el cursor */
color: #000;
text-decoration:none;
}
Gracias. Un Saludo