I have the page linked below...


I have applied a body id for each section, the page linked above has the id="about" and so I have added the rule #about #nav li.about a so that I can keep the rolled over state of that button to show the background. This is set to help the web visitor to show which page they are on.

No problems so far.

The problem comes when I tried to add the dropdown CSS rules. They work accurately on all of the dropdowns EXCEPT for the ones associated with the current page. So if you are on the about page, the about dropdown inherits the background image from the previous rule (#about #nav li.about a).

How can I make it so that all of the dropdowns (#about #nav li.about ul li a) do not show the background image?