html - CSS Dropdown Menu - Sub Menu Hover Text Color Inheritance -

i've been working on css dropdown menu struggling sub menu text color.

as expected, sub menu background color remains in hover color text reverts non-hover state.

for example, when hovering item 9 need text in "menu, item 3 , item 6" same (white) item 9.

i thinking inheritance issue can't seem figure out.

here css

.clearboth {     margin: 0;     padding: 0;     clear: both; } #nav {     font-family: sans-serif;     font-size: 12pt;     color: #666666;     line-height: 1.0; } #nav {     display: block;     padding: 6px 8px; } #nav a:link {     color: #666666;     text-decoration: none; } #nav a:visited {     color: #666666;     text-decoration: none; } #nav a:hover {     color: white;     text-decoration: none; } #nav ul {     margin: 0px;     padding: 0px;     list-style: none;     left: -1px; } #nav ul ul {     position: absolute;     visibility: hidden;     border: solid 1px gray; } #nav ul ul ul {     position: absolute;     visibility: hidden;     left: 100%;     top: -2px;     border: solid 1px gray; } #nav li.menu {     float: left;     background-color: white;     margin-right: 0px;     position: relative;     border: solid 1px gray;     border-radius: 10px;     width: 100px;     text-align: center; } #nav li.menu:hover {     background-color: #66a3e0;     border-radius: 0px;     text-align: left; } #nav li {     float: left;     position: relative;     background-color: white;     width: 100px;     margin-top: 0px;     margin-right: 0px; } #nav li li {     float: left;     position: relative;     background-color: white;     width: 100px;     margin-top: 0px;     margin-right: 0px; } #nav li:hover {     background-color: #66a3e0;     color: white; /* no effect. inheritance? */ } #nav li li:hover {     background-color: #66a3e0;     color: white; /* no effect. inheritance? */ } #nav li:hover > ul {     visibility: visible; } .right-arrow {     float: right; } 

and html

<div id="nav">     <ul>         <li class="menu"><a href="#">menu</a>              <ul>                 <li><a href="#">item 1</a>                 </li>                 <li><a href="#">item 2</a>                 </li>                 <li><a href="#">item 3<span class="right-arrow">&#9658;</span></a>                      <ul>                         <li><a href="#">item 4</a>                         </li>                         <li><a href="#">item 5</a>                         </li>                         <li><a href="#">item 6<span class="right-arrow">&#9658;</span></a>                               <ul>                                 <li><a href="">item 7</a>                                 </li>                                 <li><a href="">item 8</a>                                 </li>                                 <li><a href="">item 9</a>                                 </li>                             </ul>                         </li>                     </ul>                 </li>             </ul>         </li>     </ul>     <br class="clearboth" /> </div> 

any help, ideas or other suggestions appreciated. thank you.

http://jsfiddle.net/tinkering/wd7xy/

add

#nav li:hover > a, #nav li:hover > a:link, #nav li:hover > a:visited{     color:white; } 

demo: http://jsfiddle.net/eb97n/