css color effect in a list and popup menu

Question

In firefox (this doesnt work at all in IE6) i have this code

<div class="menu">
    <ul class="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="software.html">Software</a>
     <ul>
     <li>Blah</li>
     <li>Blah3</li>
     <li>Blah</li>
     </ul>
    </li>
    <li><a href="samples.html">Code Samples</a></li>
    <li><a href="resume.html">Resume</a></li>
    </ul>
    </div>

using this css

ul.nav li:hover,
.nav   a:hover
{
    background-color:#606060;
    color: white;
}

I have the menu text ("software") become white while the background becomes grey. However when i move my mouse down to the menu item the background continues to be grey but the next is no longer white! why? how can i fix this?

Answer 1

This should work:

ul.nav li:hover,
ul.nav li:hover a,
{
    background-color:#606060;
    color: white;
}

I'm not sure why but apparently you have to select the a element directly to change its color, otherwise it will be ignored.

Answer 2

Could be other rules interfering with your CSS, can't say without seeing everything. I recommend using Firebug to look at calculated CSS and CSS rules to see if it's doing what you expect.

Answer 3

You'd have to rework your css but if you are doing a basic menu submenu you can get it all working in IE and FF by wrapping the submenu in your 'a' tag.

<div class="menu">
    <ul class="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="software.html">Software
       <ul>
            <li>Blah</li>
            <li>Blah3</li>
            <li>Blah</li>

       </ul>
      </a>
    </li>
    <li><a href="samples.html">Code Samples</a></li>
    <li><a href="resume.html">Resume</a></li>
    </ul>
</div>

Some CSS which shouldn't require JS to to work in IE6. Not tested but should work. Note you also need to add styling and positioning for the subnav, but this still shows the basics.

.menu ul li a {
  color: blue;
}
.menu ul li a ul {
  display: none;
}
.menu ul li a:hover {
  color: white;
}
.menu ul li a:hover ul {
  display: block;
}
.menu ul li a:hover ul li {

}
.menu ul li a:hover ul li a {
  color: black;
}
.menu ul li a:hover ul li a:hover {
  color: red;
}

Then for each submenu you want after the first menu just add

.menu ul li a:hover ul li a ul {
  display: none;
}
.menu ul li a:hover ul li a:hover ul {
  display: block;
}