div:hover正在影响下面的所有元素

Question

这是一个小提琴样本:http://jsfiddle.net/K2zyU/4/

我遇到的问题是主导航悬停正在应用于子导航项.例如,如果我将列表移动到主导航div上方,则悬停按照我的预期工作？在这种情况下,我不确定我错过了什么/做错了什么.

<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

问题是这一行

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

你没有关闭div,所以列表是该div的孩子.它应该是

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