選擇無子女的元素懸停

Question

我有以下的html代碼：

 <ul class="hover amazing-menu"> 
     <li> 
      <a href="" class="link">item1</a> 
     </li> 
     <li class="parent-item"> 
      <a href="" class="link">item2 <span class="fa fa-caret-down"></span></a> 
      <ul class="hover sub-menu"> 
       <li class="parent"> 
        <a href="" class="link">sub-item1 <span class="fa fa-caret-right"></span></a> 
        <ul class="sub-menu2"> 
         <li><a href="link">sub-item11</a></li> 
         <li><a href="link">sub-item11</a></li> 
         <li><a href="link">sub-item11</a></li> 
         <li><a href="link">sub-item11</a></li> 
         <li><a href="link">sub-item11</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 

    </ul> 

及以下樣式：

.hover > li.parent-item:hover > ul.sub-menu, .hover > li.parent:hover > ul.sub-menu2{ 
opacity: 1 !important;} 

我想顯示子菜單時，我將鼠標懸停與元素。父項目類。它工作正常，但是當我將鼠標懸停在其子項上時，會顯示子菜單。

Answer 1

嘗試使用display: none;並觸發顯示的元素：懸停。

---

請看下面的例子：

ul.sub-menu, 
 
ul.sub-menu2 { 
 
    display: none; 
 
} 
 

 
a:hover + ul.sub-menu, 
 
a:hover + ul.sub-menu2, 
 
ul.sub-menu:hover, 
 
ul.sub-menu2:hover { 
 
    display: block; 
 
}

 <ul class="hover amazing-menu"> 
 
     <li> 
 
      <a href="" class="link">item1</a> 
 
     </li> 
 
     <li class="parent-item"> 
 
      <a href="" class="link">item2 <span class="fa fa-caret-down"></span></a> 
 
      <ul class="hover sub-menu"> 
 
       <li class="parent"> 
 
        <a href="" class="link">sub-item1 <span class="fa fa-caret-right"></span></a> 
 
        <ul class="sub-menu2"> 
 
         <li><a href="link">sub-item11</a></li> 
 
         <li><a href="link">sub-item11</a></li> 
 
         <li><a href="link">sub-item11</a></li> 
 
         <li><a href="link">sub-item11</a></li> 
 
         <li><a href="link">sub-item11</a></li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
     </li> 
 

 
    </ul>

Fiddle example