絶対配置された要素にマウスイベントがあります

Question

私はいくつかの深い層になるメニューを作成しています。私の意図は、いくつかのネストされたULとLIの要素を使ってこの構造を作ることです。 LI要素の1つにマウスを重ねると、そのメニュー項目の次のレベルのナビゲーションが表示されます。ただし、マウスをその要素に移動しようとすると、最終的なメニュー項目の子要素が自動的に表示されます。

<div class="menu"> 
    <ul> 
     <li><a>First</a> 
      <ul> 
       <li><a>Child of First</a></li> 
       <li><a>Child of First</a></li> 
      </ul> 
     </li> 
     <li><a>Second</a> 
      <ul> 
       <li><a>Child of Second</a></li> 
       <li><a>Child of Second</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

<style> 
    .headerMenu ul { 
     list-style: none; 
     padding: 0; 
     margin: 0; 
     width: 50%; 
     background: black; 
     color: white; 
    } 

    .headerMenu ul ul { 
     position: absolute; 
     top: 0; 
     width: 0; 
     left: 50%; 
     opacity: 0; 
    } 

    .headerMenu ul ul.visibleSub { 
     width: 100%; 
     opacity: 1; 
    } 
</style> 

<script> 
    $(document).ready(function() { 
     var $ul = $('.headerMenu ul'); 

     $ul.find('li').on({ 
      mouseenter: function() { 
       $(this).find('ul').first().addClass('visibleSub'); 
      }, 
      mouseleave: function() { 
       $(this).find('ul').first().removeClass('visibleSub'); 
      } 
     }); 
    }); 
</script> 

あなたはそれはあなたがメニューの第二層を非表示にするopacityを使用することであるhttps://codepen.io/pcasagrande/pen/RZqQwO

Answer 1

だけのzインデックスを追加します。unvisible ulのため-1を：

.menu ul ul { 
     position: absolute; 
     top: 0; 
     width: 0; 
     left: 50%; 
     opacity: 0; 
     z-index: -1; 
    } 
    .menu ul li:hover > ul{ 
     opacity: 1; 
     width: 100%; 
     z-index: 1; 
    } 

また、私はあなたがjqueryのを避けるため、純粋なCSSでこれを行うことができ、上記に言及として。 また、.menu ul ul{ transition: .2s}のトランジションを追加することもできます。シンプルなシンプルなアニメーションになります。

Answer 2

で非常にストリップダウンコードを確認してデモすることができます。彼らはまだそこにいて、あなたがそこに移動するときに2番目のセットに乗るので、それは目に見えます。 displayを使用して2番目のレイヤーを実際に隠す場合、それは機能します。 CSSを次のように変更してください。

.menu ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    width: 50%; 
    background: black; 
    color: white; 
} 

.menu ul ul { 
    display: none;  
    position: absolute; 
    top: 0; 
    width: 0; 
    left: 50%; 
} 

.menu ul ul.visibleSub { 
    width: 100%; 
    display: block; 
} 

変更する必要はありません。

Answer 3

アニメーションを必要としない場合は、あなたがいるので、あなたのコードに代わりopacity: 0

のdisplay: hiddenを使用することができ、第二レベルli aのリンクが表示されていないが、彼らはパディング/マージンを持っており、実際に右の上のスペースを占有します第1レベルの側ul。

https://codepen.io/anon/pen/prQapW