After struggling for hours, I'm finally throwing in the towel on this issue.
I have an unordered list with no background at the top level and text color of #fff. When rolled over, the background turns #fff and the text color turns #000. The child ul elements have a background of #fff and text color of #000.
My challenge is styling the text color change at the top level when the child ul elements are open, but the top-level links are not being moused over. I can't seem to keep the top level li's text color at #000 (although I got the background color to stay) as soon as I move my mouse off the top-level links to a child ul, the top level text reverts to #fff.
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li>About
<ul class="children">
<li><a href="#">About Us</a></li>
</ul>
</li>
</ul>
</div>
.menu ul li{
color: #ffffff;
text-decoration:none;
}
.menu ul li:hover{
color:#000000
background-color:#ffffff;
}
.children{
background-color:#ffffff;
color:#000000
}
This is the markup that I have come up with as a starting point. The menu ul li has no background with text color #ffffff. When the "About" link is rolled over, the background turns #ffffff, and text turns #000000. The dropdown shows up and reveals the .children ul/li's, which have the same background and text color. However, as soon as the user moves their mouse off of the parent link, the parent text goes back to white on a white background while the children retain the white background.
I want the font to turn black with a white background as long as the user hovers or clicks on a child element.