1

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

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

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

我怎样才能做到？

我的风格：

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

图片：

在第三级悬停之前：

三级悬停前

三级悬停后：

在此处输入图像描述

4

1 回答 1

3

似乎是一个简单的 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 */
}

在这里工作演示

您可能还想调整这一行：

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

至

@Html.ActionLink("Diamonds", "", "", "", new { style = "width:90px; text-align:center;" })
于 2013-05-02T07:51:39.833 回答