スライダメニューがあまりにも速く消えています

Question

私はその下に余分な三角形のスライダを作っていますが、なぜ私の三角形が本当に速く消えていて、メニューに入ることができません。誰かがなぜ私を説明することができますか？私はそれを感謝します。

これは私のHTMLです：

<nav class="nav"> 
      <ul> 
       <div class="nav_pointer_before"></div> 
       <li class="nav_pointer">About 
       <ul> 
        <li>One</li> 
        <li>Two</li> 
        <li>Three</li> 
       </ul> 
       </li> 
       <li>Gallery</li> 
       <li>Contact</li> 
    </ul> 
</nav> 

これは私のCSSです：

.nav>ul>li { 
     display: inline-block; 
     position: relative;; 
    } 

    .nav>ul>li>ul{ 
     display: none; 
     position: absolute; 
     width: 120px; 
     height: 100px; 
     background-color: white; 
     margin-top: 12px; 
     margin-left: -25px; 
     text-align: left; 
     font-size: 14px; 
     text-transform: capitalize; 
     padding-left: 14px; 
    } 

    .nav:after { 
     position: relative; 
    } 

    .nav>ul>li>ul li { 
     padding-top: 12px; 
    } 

    .nav_pointer_before { 
     display: none; 
     content: ''; 
     position: absolute; 
     width: 0; 
     height: 0; 
     padding-bottom: 20px; 
     margin-left: 20px; 
     margin-right: 20px; 
     border-left: 10px solid transparent; 
     border-right: 10px solid transparent; 
     border-bottom: 10px solid black; 
    } 

これは私のJSです：

function slideMenu(){ 
    var list = document.querySelectorAll(".nav>ul>li"); 
    var pointer = document.querySelectorAll(".nav_pointer_before"); 

    for(var i = 0; i < list.length; i++){ 
     list[i].addEventListener("mouseover", function(event){ 
     if(this.children.length > 0){ 
      this.children[0].style.display = "block"; 
      pointer[0].style.display = "block"; 
     }; 
     }); 

     list[i].addEventListener("mouseout", function(event){ 
     if(this.children.length > 0){ 
      this.children[0].style.display = "none"; 
      pointer[0].style.display = "none"; 
      }; 
     }; 
     }); 
    }; 
    }; 

    slideMenu(); 

これは私のバイオリンです：https://jsfiddle.net/dL9s0p7x/

Answer 1

問題の詳細を読むことができますが、あなたがリスト[i]のためのマウスアウトイベントハンドラを使用していることです。だから、About Navからマウスを離すと、サブリストはすぐに非表示になります。 代わりに、あなたはこのコードを使用することができます：

HTML：

<nav class="nav"> 
      <ul> 
       <div id="nav_pointer" class="nav_pointer_before"></div> 
       <li class="nav_pointer">About 
       <ul id="sublist"> 
        <li>One</li> 
        <li>Two</li> 
        <li>Three</li> 
       </ul> 
       </li> 
       <li>Gallery</li> 
       <li>Contact</li> 
    </ul> 
</nav> 

はJavaScript：

function slideMenu(){ 
     var list = document.querySelectorAll(".nav>ul>li"); 
     var pointer = document.querySelectorAll(".nav_pointer_before"); 

     for(var i = 0; i < list.length; i++){ 
      list[i].addEventListener("mouseover", function(event){ 
      if(this.children.length > 0){ 
       this.children[0].style.display = "block"; 
       pointer[0].style.display = "block"; 
      }; 
      }); 

    document.getElementById('sublist').addEventListener("mouseout", function(event){ 
      this.style.display = "none"; 
      document.getElementById('nav_pointer').style.display = "none"; 
      }); 
     }; 
     }; 

     slideMenu(); 

ここではデモです：これはあなたの問題を解決しClick for demo

希望。

Answer 2

それは、 「mouseout」イベントのそれを "mouseleave"に変更する必要があります。

あなたは違いhere