Слайд-меню слишком быстро исчезает

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

Проблема заключается в том, что вы используете MouseOut обработчик событий для списка [я]. Поэтому, когда вы перемещаете мышь в сторону от навигационной системы, подсписчик сразу скрывается. Вместо этого вы можете использовать этот код:

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