W3C ошибка вниз меню

Question

www.mesogom.com / umass /

Если вы проверите ссылку, которую видите, у меня здесь много ошибок.Я пытаюсь выяснить, почему он так сильно разносится вертикально.Я изменил onclick на onmouseover в JS, но с этими проблемами JS / CSS.Любая помощь приветствуется.

Вот JS:

/* When the user hovers on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}
    
// Close the dropdown menu if the user mouses outside of it
window.onmouseover = function(event) {
  if (!event.target.matches('.dropbtn')) {
    
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

Answer 1

Добро пожаловать на SO. Проблема с заменой click на mouseover - это способ проверки event.target. Он будет совпадать только тогда, когда ваша мышь находится над .dropbtn, а не детьми. Однако существует свойство event.currentTarget , которое всегда будет соответствовать элементу, к которому был прикреплен ваш обработчик событий. Это будет правильное использование:

document.querySelector('.dropbtn').addEventListener('mouseover', function(event) {
     if (event.currentTarget...)
});

Несмотря на то, что для решения вопроса не принято предлагать другой язык, я настоятельно рекомендую рассмотреть CSS-решение для любых всплывающих меню. Намного проще и предпочтительнее в наше время. У WC3 есть отличное руководство по этому вопросу. . Однако, если вы планируете сделать свой сайт мобильным, вы можете придерживаться меню щелчка (вы не можете очень хорошо парить на мобильном телефоне). Надеюсь, это поможет.