Question

I have a dropdown menu that I am using and can’t quite get it to work.

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

The menu is white with red text and then changes when I hover over them from red background to white text. However, when I hover over Products, the whole thing goes red when I hover over the li tag, and the text only goes white when I hover over it. But when I hover over what drops down, it’s all red again. See the Navigation bar at redballoontoystore.com . Any help?

Answer 1

Add

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

to your css code. The !important is probably optional if you place the rule in the right place.