Html 在选择子图元时阻止终止符

我正在尝试使用

嵌套的未排序列表创建一个下拉列表。

我的例子是我有一个

无序列表

，它在其

li

元素中有另一个

无序列表

。我使用

子选择器为
第一级li
元素编写了hover。我的问题是，当悬停
第一级li
元素时，其悬停过程的css也会应用于其
子li
元素。我的问题是，在我的例子中，为什么子选择器选择其子代。。？我该怎么做才能避免将来发生这种情况呢

以下是解决方案：

我的问题是，在我的例子中，为什么子选择器选择它的后代？

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

我应该做些什么来避免将来出现这种情况。

您必须通过向CSS添加
#ULHeaderMenuWrapperMenuCollection>li:hover div ul li
来保护继承。这是你的电话号码

希望这对您有所帮助。
已更新以适合您的原始代码

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

我建议您将
文本放入
或

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

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

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

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