Html 如何在css中读取此悬停语法？

如何阅读.nav菜单li:hover ul这样的语法？ 它和导航菜单有什么不同？ 我搜索了很多学校，但所有的例子都是后者。 有人能解释一下吗？ 下面是我为创建下拉子菜单而实现的代码

HTML

第一条规则：.nav菜单li：悬停ul悬停父li后将css应用于ul

第二条规则：.nav菜单li ul：悬停在ul元素上时将css应用于ul。

第一条规则：.nav菜单li：悬停在父li上时将css应用于ul

第二条规则：.nav菜单li ul:hover一旦悬停ul元素，就将css应用于ul

无序的名单 它是悬停列表项的后代 它是nav meny类成员元素的后代 悬停的无序列表 它是列表项的后代 它是nav meny类成员元素的后代 您不太可能注意到特定HTML的任何实际差异，因为您仅有的包含无序列表的列表项除了一个无序列表之外什么都不包含

无序的名单 它是悬停列表项的后代 它是nav meny类成员元素的后代 悬停的无序列表 它是列表项的后代 它是nav meny类成员元素的后代 您不太可能注意到特定HTML的任何实际差异，因为您仅有的包含无序列表的列表项除了一个无序列表之外什么都不包含

<ul class="nav-menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">Retrievals</a>
    <ul class="dropdown-menu">
       <li><a href="#">Data Listing</a></li>
       <li><a href="#">Web Scheduling</a></li>
       <li><a href="#">Google Maps Application</a></li>
    </ul>         
 </li>
 <li><a href="#">Reporting</a></li>

.nav-menu li    
{
    width: 150px;  
    float: left;  
}
.nav-menu li ul 
{
    display: none;  

}               
.nav-menu li:hover ul   
{
    display: block; 
}

.nav-menu li:hover ul

.nav-menu li ul:hover