I am facing an issue with the drop-down menu I created, as some of the sub menu items are inheriting CSS properties from the parent menu item.
In particular, the sub menu items are picking up the blue border from the parent and the light blue background color when hovering over them.
Even though I added a red border, the blue one still shows, and the 'red' hover class I included is not being triggered.
You can view my Fiddle here: http://jsfiddle.net/oampz/W2zrn/
HTML:
<nav class="site-nav">
<ul class="menu-nav wrap menu menu--hor">
<ul id="main-nav">
<li class="menu-nav--home">
<a href="index.html" title="home"></a>
</li>
<li id="nav-dropdown" class="drop-down"> <a>Link 1</a>
<ul class="visuallyhidden">
<li>
<a href="#" title="title">Link Two Sub One</a>
</li>
<li>
<a href="#" title="title">Link Two Sub Two</a>
</li>
<li>
<a href="#" title="title">Link Two Sub Three</a>
</li>
</ul>
</li>
<li><a>Link 2</a>
</li>
</ul>
</ul>
</nav>