<ul class="first">
      <li class="lfirst"><a href="" class="anchor">Menu</a></li>
      <li class="lfirst">
        <a href="" class="anchor">Menu</a>
        <ul class="second">
          <li>Menu 01</li>
          <li>Menu 02</li>
          <li>Menu 03</li>
        </ul>
      </li>
      <li class="lfirst"><a href="" class="anchor">Menu</a></li>
      <li class="lfirst"><a href="" class="anchor">Menu</a></li>
      <li class="lfirst">
        <a href="" class="anchor">Menu</a>
        <ul class="second">
          <li>Menu 01</li>
          <li>Menu 02</li>
          <li>Menu 03</li>
        </ul>
      </li>
      <li class="lfirst"><a href="" class="anchor">Menu</a></li>
    </ul> 

body {
  font-size: 1.3rem;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}

.first {
  display: flex;
  gap: 30px;  
  position: relative;
}
.second {
  position: absolute;
  /* top:30px; */
  padding: 10px;
  opacity: 0;
  background-color: rgb(255, 255, 255);
  border: 1px solid red;
  transition: all 0.5s;
}
.now .second {
  opacity: 1;
  
}

const allAnchors = document.querySelectorAll('.anchor')
let isMouseOver
allAnchors.forEach(allAnchor => {
  allAnchor.addEventListener('mouseover', () => {
    console.log('yes')
    isMouseOver = true
    if (isMouseOver) {
      allAnchor.parentElement.classList.add("now")
    }
  })
  allAnchor.parentElement.addEventListener('mouseleave', () => {
    isMouseOver = false
    if (!isMouseOver) {
      allAnchor.parentElement.classList.remove("now")
    }
  })
})