Hover Effect on Child Links in Drop Down Menu

Hello everyone,

I'm working on tidying up my drop down menu on my home page. The child links have a problem in that they are highlighted and given a hover effect when the user's mouse becomes level with the anchor tag on the drop down menu. There is something incorrect with the way I have targeted it in my dropdownmenus.css file.


#bMenu li:hover li a, #bMenu li:focus li a, #bMenu li:active li a{
color:#0C0;
text-shadow:1px 1px 1px #000;
filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#000000);
text-decoration:underline;
background:none;
filter:none;
border:none;
font-size:12px;
display:inline;
}

#bMenu div a:hover,
/*#bMenu div li:hover a, */
#bMenu div a:focus,
/*#bMenu div li:focus a,*/
#bMenu div a:active
/*#bMenu div li:active a */{
color:#0F0;
background:none;
filter:none;
border:none;
text-decoration:none;
}


You can see what's happening for yourself at atlantareviewgroup.com (http://www.atlantareviewgroup.com). Check the bottom drop down menu to see how the above code does not achieve a hover effect at all.

so you want them not to highlight like the nav at the top? as of now, they are not.

take a look at your code:
if you want all that code crossed out to overwrite the other, you have to stick a !important at the end. "#bMenu li:hover li a" has priority over "#bMenu div a:hover"


#bMenu div a:hover,
/*#bMenu div li:hover a, */
#bMenu div a:focus,
/*#bMenu div li:focus a,*/
#bMenu div a:active
/*#bMenu div li:active a */{
color:#0F0 !important;
background:none !important;
filter:none !important;
border:none !important;
text-decoration:none !important;
}


http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-103.png