Hello, everyone!
I'm trying to do a horizontal dropdown menu on css.
As of now, i've managed to style a list of 6 unordered elements, two of them containing an unordered list of their own into blocks of 150px width.
The background color for the non-hover blocks is blue, and the font color inside is white. If you hover over a block, its background color changes to white and the font color to a light grey.
The thing is every block works fine on its own, but when i hover over one of the blocks which has an unordered list inside and then hover to one of the items inside, the original block keeps its white hover background color but its font changes back to white (i'd like it to keep its grey value).
Am i missing something in the "ul li li ul:hover ul..." semantic labyrinth?
Thank you in advance, guys.
This is the html and css code i'm using (if anyone needs it):
_________________________________________
CSS
@charset "UTF-8";
#navMenu {
width: 900px;
margin: 0 auto 0 auto;
padding: 0;
border-bottom:1px #000;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height:30px;
}
#navMenu li {
margin: 0;
padding: 0;
list-style:none;
float:left;
position:relative;
background-color:#89bce6;
}
#navMenu ul li a {
text-align:center;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#fff;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:30px; /*cambiar a 32 si hay borde */
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu li:hover {
background-color: #FFF;
}
#navMenu a:hover {
color: #CCC;
}
/************************************************************/
.clearFloat {
clear:both;
margin:0px;
padding:0px;
}
_________________________________
HTML
<div id="navMenu">
<ul>
<li><a href="#">La Clínica</a></li>
<li><a href="#">Equipo</a>
<ul>
<li><a href="#">Doctores</a></li>
<li><a href="#">Higienistas</a></li>
<li><a href="#">Material Técnico</a></li>
</ul>
</li>
<li><a href="#">Servicios</a>
<ul>
<li><a href="#">Ortodoncia</a></li>
<li><a href="#">Odontología</a></li>
<li><a href="#">Implantología</a></li>
<li><a href="#">Prótesis</a></li>
<li><a href="#">Cirugía</a> </li>
<li><a href="#">Periodoncia</a></li>
<li><a href="#">Blanqueamiento</a></li>
<li><a href="#">Estética dental</a></li>
</ul>
</li>
<li><a href="#">Consejos</a></li>
<li><a href="#">Casos Clínicos</a></li>
<li><a href="#">Programa de Estancias</a></li>
</ul> <!-- end Main ul -->
<br class=".clearFloat" />
</div> <!-- end navMenu div -->
