Question

我正在尝试使用nested Un ordered lists.

创建一个下拉列表

我的情况是我有unordered list，其unordered list元素中有另一个li。我使用first level li为child selector元素编写了鼠标悬停。我的问题是在悬停first level li元素时，其悬停过程的css也会应用于其child li元素。我的问题是为什么子选择器在我的情况下选择它的后代..？我该怎么做才能在将来避免这种情况。

DEMO - Fiddle

Answer 1

以下是以下解决方案：

我的问题是为什么子选择器在我的情况下选择它的后代..？

因为您已通过添加#ULHeaderMenuWrapperMenuCollection > li:hover

定义了CSS的一部分

我该怎么做以避免将来发生这种情况。

您必须通过向CSS添加#ULHeaderMenuWrapperMenuCollection > li:hover div ul li来保护继承。这是Working Solution。

#ULHeaderMenuWrapperMenuCollection > li:hover div ul li
{
color:black;
}

#ULHeaderMenuWrapperMenuCollection > li:hover div ul li:hover
{
color:orange;
}

希望这有帮助。

Answer 2

已更新以适合您的原始代码

当鼠标悬停在您的子列表中时，它仍然悬停在主要列表上。

我建议您将<li>文字放在<span>或<a>中，这样可以使您的css最简单：

<强> HTML

<ul id="ULHeaderMenuWrapperMenuCollection">
    <li>        
        <span>Products</span>                  
        <div id="DivProductsMenu">
            <div id="DivProductsMenuUpper">
                <ul> 
                    <li><span>CIMS</span></li>
                    <li><span>VPRO</span></li>
                    <li><span>BIRIS</span></li> 
                </ul>
            </div>
            <div id="DivProductsMenuLower">
                <ul> 
                    <li><span>PATRON</span></li>
                    <li><span>DEAL</span></li>
                    <li><span>MEDIX</span></li> 
                </ul>
            </div>
        </div> 
    </li>                              
    <li>
        <span>Contact Us</span>
    </li>
</ul>

<强> CSS

#ULHeaderMenuWrapperMenuCollection li > span:hover {
    color:orange;
}

JsFiddle

在选择子元素时阻止Desendants

DEMO - Fiddle

2 个答案: