Меню Javascript Подчеркивание, предотвращающее правильную работу выпадающего меню

Question

Я добавил подчеркивание в свое меню, когда люди наводят мышью. Проблема в том, что выпадающее меню больше не работает.

Я могу сказать, что функция javascript направлена ​​на все якорные ссылки. Так что бы лучше всего решить проблему с выпадающим меню? Должен ли я изменить QuerySelectorAll на go для классов вместо якорных ссылок, а также добавить больше классов / делений вокруг меню, для которого нужно подчеркнуть значение go ниже?

Wondering Что это за правильный подход к почини это? Пожалуйста, смотрите только на рабочем столе. Я удалю эту функцию на мобильном телефоне.

https://codepen.io/rubenjr005/pen/ExjQdjw

(function() {

  const target = document.querySelector(".target");
  const links = document.querySelectorAll(".mynav a");
  const colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"];

  function mouseenterFunc() {
    if (!this.parentNode.classList.contains("active")) {
      for (let i = 0; i < links.length; i++) {
        if (links[i].parentNode.classList.contains("active")) {
          links[i].parentNode.classList.remove("active");
        }
        links[i].style.opacity = "0.25";
      }

      this.parentNode.classList.add("active");
      this.style.opacity = "1";

      const width = this.getBoundingClientRect().width;
      const height = this.getBoundingClientRect().height;
      const left = this.getBoundingClientRect().left + window.pageXOffset;
      const top = this.getBoundingClientRect().top + window.pageYOffset;
      const color = colors[Math.floor(Math.random() * colors.length)];

      target.style.width = `${width}px`;
      target.style.height = `${height}px`;
      target.style.left = `${left}px`;
      target.style.top = `${top}px`;
      target.style.borderColor = color;
      target.style.transform = "none";
    }
  }

  for (let i = 0; i < links.length; i++) {
    links[i].addEventListener("click", (e) => e.preventDefault());
    links[i].addEventListener("mouseenter", mouseenterFunc);
  }

  function resizeFunc() {
    const active = document.querySelector(" .mynav li.active");

    if (active) {
      const left = active.getBoundingClientRect().left + window.pageXOffset;
      const top = active.getBoundingClientRect().top + window.pageYOffset;

      target.style.left = `${left}px`;
      target.style.top = `${top}px`;
    }
  }

  window.addEventListener("resize", resizeFunc);

})();


/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap');


/* 
YELLOW - #f7c51e
GREY - #363636
background white - #f6f6f6

*/



* {
    box-sizing: border-box;
    margin: 0; 
    padding: 0;
}


.color-overlay-container {
    justify-content: center;
    align-items: center;
    position: relative;
}

.color-overlay {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .5;
    z-index: 2;
    position: absolute;
}


.btn-black{
    padding: 1.5rem 2rem;
    color: white;
    background: black;
    text-transform: uppercase;
    font-weight: 900;
}

.btn-yellow{
    padding: 1.5rem 2rem;
    color:  white;
    background: #f7c51e;
    text-transform: uppercase;
    font-weight: 900;
}


body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.4;
}

a {
    text-decoration: none;
}


p {
    margin: .5rem 0;
}

/* Utility Classes */

/* Grid Container */


.grid-container {
display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  margin: auto;
  grid-auto-rows: minmax(200px, auto);
}

.grid-container-2 {
    display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  margin: auto;
}

.card {
    background: #fff;
    padding: 1rem;
}


/* Grid Container - END */


.container {
    max-width: 1404px;
    margin: auto;
    padding: 0 2rem;
    overflow: hidden;
}


.text-center {
    text-align: center;
}


.text-yellow {
    color: #f7c51e;
}

.bg-yellow {
    background: #f7c51e;
    color: black;
}

.bg-grey {
    background: #f9f9f9;
    color: black;
}


.l-heading {
    font-weight: bold;
    font-size: 4rem;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

.m-heading {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

.lead {
    font-size: 1.3rem;
    margin: 0.75rem 0;
}



/* Padding */

.py-1 {
    padding: 1.5rem 0;
}

.py-2 {
    padding: 2rem 0;
}

.py-3 {
    padding: 3rem 0;
}


/* All Around Padding */

.p-1 {
    padding: 1.5rem;
}

.p-2 {
    padding: 2rem;
}

.p-3 {
    padding: 3rem;
}


/* Utility Classes - END */



/* ================  HOME PAGE ==================== */


/* HEADER */



.site-header {
    background-color: transparent;
}

.site-header .header-container {
    background: black;
    color: white;
}

/* BLACK BAR */

.site-header .header-container .header-container_wrap {
    padding: 30px 5px;
    /* background: red; */
}

#masthead .header-container .header-container_wrap .items {
    display: flex;

}

#masthead .header-container .header-container_wrap .items .contact-info {
    display: flex;

}

#masthead .header-container .header-container_wrap .items .quality-logo {
    margin-right: 3rem;
    line-height: 5px;
}

#masthead .header-container .header-container_wrap .items .quality-logo p {
    font-size: 14px;
}


#masthead .header-container .header-container_wrap .items .item {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}


#masthead .header-container .header-container_wrap .items .item {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}

#masthead .header-container .header-container_wrap .items .item .facebook-like {
    text-align: center;
}



#masthead .header-container .header-container_wrap .items .item .fas  {
    font-size: 18px;
    color: #f7c51e;
    margin-right: 1.5rem;
}


#masthead .header-container .header-container_wrap .items .contact-info .item .fas  {
    font-size: 18px;
    color: #f7c51e;
    margin-right: 1.5rem;
    background: black;
    border-radius: 50%;
    padding: 10px;
    border: 1px solid #363636;
}

/* ========================== Bottom White Header Menu  - START ================ */


/* Menu Underline */


.mynav a {
    display: block;
    font-size: 20px;
    color: black;
    text-decoration: none;
    padding: 7px 15px;
  }
  
  .target {
    position: absolute;
    border-bottom: 4px solid transparent;
    z-index: 100;
    transform: translateX(-60px);
  }
  
  .mynav a,
  .target {
    transition: all .35s ease-in-out;
  }



/* Add a black background color to the top navigation */
.topnav {
    background-color: white;
    overflow: hidden;
    padding: 1rem;

  }


  #myTopnav .items {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  

  #myTopnav .items .item .mynav ul{
      display: flex;
      align-items: center;
  }
  
  /* Style the links inside the navigation bar */
  .topnav a {
    /* float: left;
    display: block; */
    color: rgb(94,94,94);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 600;
  }
  
  /* Add an active class to highlight the current page */

/*     
    .active {
     color: black;
    font-weight: 600; 
    color: #363636;
   }  */
  

  /* Hide the link that should open and close the topnav on small screens */
  .topnav .icon {
    display: none;
  }
  

  /* ============================ DROP DOWN MENU =============================== */
  /* Dropdown container - needed to position the dropdown content */
  .dropdown {
    /* float: left; */
    overflow: hidden;
  }
  
  /* Style the dropdown button to fit inside the topnav */
  .dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    color: rgb(94,94,94);
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    text-transform: uppercase;
    font-weight: 600;
    display: flex;
    align-items: center;
  }
  
  /* Style the dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f7c51e;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    color: rgb(94,94,94);
  }
  
  /* Style the links inside the dropdown */
.mynav   .dropdown-content a {
    font-size: 14px;
    font-weight: 500;
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    text-transform: uppercase;
  }
  
  /* Add a dark background on topnav links and the dropdown button on hover */
  .topnav a:hover, .dropdown:hover .dropbtn {
    /* background-color: red; */
    color: black;
    

  }
  
  /* Add a grey background to dropdown links on hover */
  .dropdown-content a:hover {
    /* background-color: red; */
    color: black;
    
  }

  
  /* Show the dropdown menu when the user moves the mouse over the dropdown button */
  .dropdown:hover .dropdown-content {
    display: block;
    z-index: 101;
  }
  
  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
  /* @media screen and (max-width: 600px) {
    .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;
    }
    .topnav a.icon {
      float: right;
      display: block;
    }
  } */
  
  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  /* @media screen and (max-width: 600px) {
    .topnav.responsive {position: relative;}
    .topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    .topnav.responsive a {
      float: none;
      display: block;
      text-align: left;
    }
    .topnav.responsive .dropdown {float: none;}
    .topnav.responsive .dropdown-content {position: relative;}
    .topnav.responsive .dropdown .dropbtn {
      display: block;
      width: 100%;
      text-align: left;
    }
  } */


  /* SEARCH ICONS */

  #myTopnav .items .item .fa-search{
      font-size: 1.25rem;
      color: #363636;
  }




/* ========================== Bottom White Header Menu - END ================ */

Answer 1

Проблема в том, что элемент .target находится сверху кнопки. Поэтому hover не срабатывает. Если у вас .target есть pointer-events: none;, это решит вашу проблему.

.target{
    pointer-events: none;
}

Образец Codepen.

Обратите внимание, что вам также нужно будет дать немного margin-left в "Фотогалерею" li, поскольку она попадает под Кнопка «Службы» и путаница с парением в указанной c точке.