下拉菜单帮助CSS

我有一个下拉菜单，我正在使用，不能完全让它工作

<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标记上时，整个内容会变为红色，而当我将鼠标悬停在li标记上时，文本只会变为白色。但当我在落下的物体上盘旋时，它又变成了红色。请参阅redballotoystore.com上的导航栏。有什么帮助吗？

我很确定，如果您使用锚定标记切换列表项元素的嵌套，这将解决您的问题：

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

添加

---

你的css代码。

！重要提示

如果您将规则放置在正确的位置，则可能是可选的。

CSS非常广泛，因此我将展示我所能做的。一秒钟前我就试过了。它根本不会影响产品部分。我正在等待Visual Studio的响应，以便显示CSS

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