Question

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;
}

​
​
​
​

Answer 1

The problem is this line

<div class="main">MAIN NAV<div>

You haven’t closed the div, so the list is a child of that div. It should be

<div class="main">MAIN NAV</div>