Css color effect on list and popup menu

Question

Css color effect on list and popup menu

In firefox (this doesn't 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;
}

My menu text ("software") turns white and the background turns gray. However, when I move my mouse over to the menu item, the background continues to be gray, but the next one is no longer white! What for? how can i fix this?

0

css

user34537 May 19 '09 at 16:05

a source to share

3 answers

slosd · Answer 1 · 2009-05-19T16:08:32+0000

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 need to select an element to change its color, otherwise it will be ignored.

Bjorn tipling · Answer 2 · 2009-05-19T16:09:26+0000

There might be other rules interfering with your CSS, can't tell without seeing everything. I recommend using Firebug to review the computed CSS and CSS rules to make sure it does what you expect.

Ballsacian1 · Answer 3 · 2009-05-19T16:21:11+0000

You will have to rework your css, but if you are doing a main menu submenu, you can make it all work in IE and FF by wrapping the submenu in an '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 that shouldn't require JS to work in IE6. Not tested but should work. Note that 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 every 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;
}

Css color effect on list and popup menu

More articles: