0

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

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

演示 - 小提琴

4

2 回答 2

1

以下是解决方案：

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

因为您已经通过添加定义了 CSS 的一部分#ULHeaderMenuWrapperMenuCollection > li:hover

将来我应该怎么做才能避免这种情况。？

#ULHeaderMenuWrapperMenuCollection > li:hover div ul li您必须通过添加到您的 CSS来保护继承。这是工作解决方案。

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

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

希望这可以帮助。

于 2013-05-28T09:52:44.693 回答
1

更新以适合您的原始代码

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

我建议您将<li>文本放在 a<span>或 a<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;
}

提琴手

于 2013-05-28T09:55:55.633 回答