Having some Cascading issues

HTML & CSS
1

I just implemented a jQuery/CSS dropdown menu on my site - http://canspecinspection.com/

The problem is, that the box-shadow and background effect I don’t want to be applied on the child elements (aka: the drop down menu). As you can see it current is applied. I’ve tired this syntax, but no luck:

#menu-main-navigation li > a:hover

Any ideas?

2

I think you meant to use #menu-main-navigation > li a:hover{…}

3

I’m sorry, I don’t see the difference. Did I miss a character?

4

actually I transposed a rule

YOURS: #menu-main-navigation li > a:hover
MINE: #menu-main-navigation > li a:hover

see now?

you were selecting ALL children of LIs that were A
I am selecting LIs that are children of #menu-main-navigation

hope that helps

5

Thanks for the tip. Unfortunately I tried that one already…any other ideas?

6

I cant get to the CSS on your page… and this far less graceful a solution but…

#menu-main-navigation li li a:hover{… set box-shadow effects to none and border-radius:0}

and that should do it, also look at the order of your code, it may not just be a more specific rule , but a similar rule that comes later in the code that re-introduces the drop shadow…