div:hover is affecting all elements below
- by Jesse
Here is a sample fiddle: http://jsfiddle.net/K2zyU/4/
The problem I am experiencing is that the main navigation hover is applying to the sub navigation items. If for example, I were to move the list above the main navigation div the hover works as I would expect? I'm unsure of what I'm missing / doing wrong in this case.
<div class="main">MAIN NAV<div>
<ul class="sub">
<li>SUB NAV 1</li>
<li>SUB NAV 2</li>
<li>SUB NAV 3</li>
<li>SUB NAV 4</li>
<li>SUB NAV 5</li>
<li>SUB NAV 6</li>
</ul>
.main:hover, .sub li:hover {
color: black;
background-color: #f3ffff;
opacity: .6;
}
