CSS Dropdown navigation change hover colour - html

Question

i have the following CSS for a navigation menu
ul#css3menu_top,ul#css3menu_top ul {
margin:0;
list-style:none;
padding:0;
}
ul#css3menu_top,ul#css3menu_top .submenu {
background-color:#EEEEEE;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
ul#css3menu_top .submenu {
visibility:hidden;
position:absolute;
left:0;
top:100%;
opacity:0;
-moz-transition:all 0.5s;
-webkit-transition:opacity 0.5s;
-o-transition:opacity 0.5s;
-moz-box-shadow:3.5px 3.5px 5px #000000;
-webkit-box-shadow:3.5px 3.5px 5px #000000;
box-shadow:3.5px 3.5px 5px #000000;
float:left;
background-color:#EEEEEE;
border-width:2px;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-color:#FFF;
padding:0 10px 10px;
}
ul#css3menu_top li:hover>.submenu {
visibility:visible;
opacity:1;
}
ul#css3menu_top li {
position:relative;
display:block;
white-space:nowrap;
font-size:0;
float:left;
}
ul#css3menu_top li:hover {
z-index:1;
}
ul#css3menu_top ul .submenu {
z-index:2;
position:absolute;
left:100%;
top:0;
}
ul#css3menu_top {
font-size:0;
width:100%;
z-index:999;
position:relative;
display:inline-block;
zoom:1;
padding:0 0%;
margin:0 0%;
*display:inline;
}
ul#css3menu_top .column {
float:left;
}
* html ul#css3menu_top li a{
display:inline-block;
}
ul#css3menu_top>li {
margin:0;
width:17%;
}
ul#css3menu_top li.toplast{
width:15%;
}
ul#css3menu_top a:active, ul#css3menu_top a:focus {
outline-style:none;
}
ul#css3menu_top a{
display:block;
vertical-align:middle;
text-align:left;
text-decoration:none;
font:bold 14px Calibri;
color:#EEEEEE;
text-shadow:#FFF 0 0 1px;
cursor:pointer;
padding:6px 15px 6px 3px;
background-color:#666666;
background-image:url("mainbk.png");
background-repeat:repeat;
background-position:0 0;
border-width:0 0 0 1px;
border-style:solid;
border-color:#c0c0c0;
}
ul#css3menu_top ul li {
float:none;
margin:10px 0 0;
}
ul#css3menu_top ul a {
text-align:left;
padding:4px;
background-color:#EEEEEE;
background-image:none;
border-width:0;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
font:14px Calibri;
color:#666666;
text-decoration:none;
}
ul#css3menu_top li:hover>a,ul#css3menu_top li a.pressed {
background-color:#EEEEEE;
color:#666666;
background-position:0 100px;
text-decoration:none;
}
ul#css3menu_top img {
border:none;
vertical-align:middle;
margin-right:6px;
}
ul#css3menu_top span {
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}
ul#css3menu_top ul span {
padding-right:8px;
}
ul#css3menu_top ul li:hover>a,ul#css3menu_top ul li a.pressed {
background-color:#EEEEEE;
background-image:none;
color:#666666;
text-decoration:none;
}
ul#css3menu_top li.topfirst>a {
padding-left: 7px;
border-width:0;
border-radius:4px 0 0 4px;
-moz-border-radius:4px 0 0 4px;
-webkit-border-radius:4px;
-webkit-border-top-right-radius:0;
-webkit-border-bottom-right-radius:0;
}
ul#css3menu_top li.toplast>a {
padding-right: 7px;
border-radius:0 4px 4px 0;
-moz-border-radius:0 4px 4px 0;
-webkit-border-radius:0;
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
}
#media only screen and (max-width:900px),only screen and (max-device-width:900px){
ul#css3menu_top>li{width:33%;}ul#css3menu_top>li:nth-child(3){width:34%}ul#css3menu_top>li:nth-child(n+4){width:33%;}ul#css3menu_top>li:nth-child(6){width:34%}}
#media only screen and (max-width:600px),only screen and (max-device-width:600px){
ul#css3menu_top>li{width:50%;}ul#css3menu_top>li:nth-child(n+3){width:50%;}ul#css3menu_top>li:nth-child(n+5){width:50%;}}
#media only screen and (max-width:450px),only screen and (max-device-width:450px){
ul#css3menu_top>li{width:100%;}ul#css3menu_top>li:nth-child(n+2){width:100%;}ul#css3menu_top>li:nth-child(n+3){width:100%;}ul#css3menu_top>li:nth-child(n+4){width:100%;}ul#css3menu_top>li:nth-child(n+6){width:100%;}}
/*opera hack*/
#media only screen and (min-width:900px){
html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top{
display:table;
}
html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top>li{
width:auto;
float:none;
display:table-cell;
}
html>/**/body noindex:-o-prefocus, html>/**/body ul#css3menu_top li.toplast{
width:auto;
display:table-cell;
}
}
i cannot work out how to make the text colour change when i hover over it on the sub menu
here is a fiddle of it working
http://jsfiddle.net/n3FAq/
any one got any ideas?

Answer 1

Try this
ul#css3menu_top ul li a:hover {
color: #c00;
}
DEMO

Answer 2

You don't have a hover rule for links in the submenu.
ul#css3menu_top .submenu a:hover {
color: red;
}
JSFiddle