当鼠标悬停到第三级，第二级字体颜色改为下拉菜单CSS

Question

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

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

我想让它保持白色（如悬停）时，第三个层次是悬停..

我如何能做到吗？

我的风格：

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

图片：

之前第三级悬停：

第三级悬停后：

Answer 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

您可能还需要adjsut这一行：

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

到

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