Menu Item Hover State When Not Hovering [jsfiddle Link Included]

I have a navigation, and when I hover on the main menu item 'Markets' a dropdown appears changing the 'Markets' text to a different color. Now when I go to one of the dropdowns the

Solution 1:

Change:

#nav a:hover { ... }

To:

#nav li:hover a { ... }

Updated JSFiddle.