Когда мыши при наведении на третий уровень, второй цвет шрифта уровня изменилось в раскрывающемся меню 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;" })