私は次のHTMLコードを持ってHOVER

Question

のための子供がいない要素を選択します。

 <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