Цветной эффект CSS в списке и всплывающем меню

Question

В Firefox (это не работает вообще в IE6) у меня есть этот код

<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>

используя эту CSS

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

У меня текст меню («программное обеспечение») становится белым, а фон - серым. Однако, когда я перемещаю свою мышь вниз к пункту меню, фон продолжает оставаться серым, но следующий больше не белый! Зачем? как я могу это исправить?

Answer 1

Это должно работать:

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

Я не уверен, почему, но, видимо, вам нужно выбрать элемент a напрямую, чтобы изменить его цвет, иначе он будет проигнорирован.

Answer 2

Вам придется переделать свой css, но если вы делаете основное подменю меню, вы можете заставить все это работать в IE и FF, поместив подменю в тег «a».

<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>

Некоторые CSS, которые не должны требовать JS для работы в IE6. Не проверено, но должно работать. Обратите внимание, что вам также нужно добавить стилизацию и позиционирование для субнава, но это все еще показывает основы.

.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;
}

Затем для каждого подменю, которое вы хотите после первого меню, просто добавьте

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

Answer 3

Могут быть другие правила, влияющие на ваш CSS, не могу сказать, не видя всего. Я рекомендую использовать Firebug, чтобы посмотреть на рассчитанные правила CSS и CSS, чтобы понять, выполняет ли он то, что вы ожидаете.