当鼠标悬停到第三级时，第二级字体颜色更改下拉菜单 css答案

【问题标题】：When mouse hover to third level, second level font color changed drop down menu css当鼠标悬停到第三级时，第二级字体颜色更改下拉菜单 css
【发布时间】：2013-05-02 07:44:03
【问题描述】：

我的下拉菜单样式有问题..

当我将鼠标悬停在第三级时，第二级字体颜色会更改为它的颜色..

我想让它在第三级悬停时保持白色（作为悬停）..

我该怎么做？

我的风格：

<style type="text/css">
/*---- CROSS BROWSER DROPDOWN MENU ----*/

ul#nav
{
    margin: 0 0 0 0px;
}

ul.drop a
{
    padding: 10px;
    margin: 0;
    display: block;
    color: #006699; /*font-family: Verdana;
    font-size: 14px;*/
    text-align: left;
    text-decoration: none;
}

ul.drop a:hover
{
    display: block;
    color: #ffffff; /*font-family: Verdana;
    font-size: 14px;*/
    text-align: left;
    text-decoration: none;
}

ul.drop, ul.drop li, ul.drop ul
{
    list-style: none;
    margin: 0;
    padding: 0; /*border: 1px solid #fff;
    background: #555;*/
    color: #000000;
}

ul.drop
{
    position: relative;
    z-index: 597;
    float: left;
}

ul.drop li
{
    float: left;
    line-height: 1.3em;
    vertical-align: middle;
    zoom: 1;
}

ul.drop li.hover, ul.drop li:hover
{
    position: relative;
    z-index: 599;
    cursor: default;
    background: #006699;
}

#heading:hover
{
    background: #E9E9EB;
}

ul.drop ul
{
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
    width: 150px;
    background: #E9E9EB;
    border: 1px solid #ffffff;
}

ul.drop ul li
{
    float: none;
}

ul.drop ul a
{
    color: #000000;
}

ul.drop ul ul
{
    top: -2px;
    left: 100%;
}

ul.drop li:hover > ul
{
    visibility: visible;
}

我的代码：

<ul id="nav" class="drop">
    <li id="heading">@Html.ActionLink("Diamonds", "", "", "", new { style = "width:90px; text-align:center; color:black" })
        <ul>
            <li>@Html.ActionLink("Diamond Search", "", "")</li>
            <li>@Html.ActionLink("About Diamond", "", "")</li>
            <li>@Html.ActionLink("Custom Your Diamond Jewellery", "", "")
                <ul>
                    <li>@Html.ActionLink("Create Your Own Ring", "", "")</li>
                    <li>@Html.ActionLink("Create Your Own Earrings", "", "")</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

图片：

在第三级悬停之前：

第三级悬停后：

【问题讨论】：

标签： css model-view-controller drop-down-menu

【解决方案1】：

看起来像一个简单的 CSS 问题。

ul.drop li.hover, ul.drop li:hover
{
    position: relative;
    z-index: 599;
    cursor: default;
    background: #006699;
    color: #fff; /* <----------- ADDED */
}

#heading:hover
{
    background: #E9E9EB;
    color: #000; /* <----------- ADDED */
}

工作DEMO HERE

您可能还想调整这一行：

@Html.ActionLink("Diamonds", "", "", "", new { style = "width:90px; text-align:center; color:black" })

到

@Html.ActionLink("Diamonds", "", "", "", new { style = "width:90px; text-align:center;" })

【讨论】：

在 FF 20.0.1 中完美运行。
在 FF 中工作得很好。
@Scott 将鼠标悬停在 jsfiddle 中的第三个菜单上时，第二个菜单文本不会变黑
@Ozzy Uhm .. 这是要修复的错误。请重新阅读问题。击中第三级时，第二级应不为黑色。除非我是完全误读了这个问题的人。
@user1903766 请查看更新后的答案。如果这仍然不起作用，那么您在其他地方（您还没有发布）有 CSS 或 HTML 导致了问题。正如您在我的演示中看到的那样，它可以工作。