Выпадающее меню help CSS

Question

У меня есть раскрывающееся меню, которое я использую и не могу заставить его работать.

<ul id="nav" class="dropdown dropdown-linear dropdown-columnar"> 
    <a href="http://www.example.com/index.php"><li>Home</li></a> 
    <a href="http://www.example.com/products/index.php"><li class="dir">Products 
     <ul> 
      <li class="dir"><a href="http://www.example.com/buckyballs/index.php">Buckyballs</a></li> 
      <li class="dir"><a href="http://www.example.com/calicocritters/index.php">Calico Critters</a></li> 
      <li class="dir"><a href="http://www.example.com/games/index.php">Games</a></li> 
      <li class="dir"><a href="http://www.example.com/magnetics/index.php">Magnetics</a></li> 
      <li class="dir"><a href="http://www.example.com/playmobil/index.php">Playmobil</a></li> 
      <li class="dir"><a href="http://www.example.com/quercetti/index.php">Quercetti</a></li> 
     </ul> 
    </li></a> 
    <a href="http://www.example.com/calendar/index.php"><li>Calendar</li></a> 
    ... 
</ul> 

Меню белого цвета с красным текстом, а затем изменяется, когда я навешиваю на них красный цвет на белый текст. Однако, когда я нависаю над продуктами, все это становится красным, когда я наводил курсор на тег li, и текст только белеет, когда я навис над ним. Но когда я нависаю над тем, что падает, все снова красное. См. Панель навигации на странице redballoontoystore.com. Любая помощь?

Answer 1

Добавить

.dir:hover a { 
    color: white!important; 
} 

в код CSS. !important, вероятно, является необязательным, если вы разместите правило в нужном месте.

Answer 2

Я уверен, что если вы переключите вложенность элементов списка элементов с якорными тегами, это будет исправить проблему:

<a href="http://www.example.com/buckyballs/index.php"><li class="dir">Buckyballs</li></a>