下拉菜单帮助CSS

时间:2012-06-20 19:18:54

标签: css drop-down-menu

我有一个我正在使用的下拉菜单,但无法让它正常工作。

<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上的导航栏。有什么帮助吗?

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

添加

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

到你的css代码。如果您将规则放在正确的位置,!important可能是可选的。