CSS: Dropdown menu expands when hover below actual target

Question

My best attempt to remedy this toggles the visibility on and off when hovering. However, this isn't ideal because the menu is supposed to transition into view. If the visibility is toggled, the transition isn't seen by the user when approaching the "hover element" from below.

My testing makes me think the issue is purely CSS related but I've gone ahead and included the javascript if it helps. The visibility toggle I mentioned above is commented out.

let items = document.getElementsByClassName('items');
let menuBtn = document.getElementById('menuBtn');
let menuList = document.getElementById('menuList');
let menuClass = document.getElementsByClassName('menu');

menuBtn.addEventListener('mouseenter', func, false);
menuList.addEventListener('mouseleave',func2, false);


//visibilityToggle('hidden', 'none');

function func() {
    console.log('out');
    //visibilityToggle('visible', 'visible');
}

function func2() {

   //visibilityToggle('hidden', 'none');
   console.log('in');
}

function visibilityToggle(vis, point) {
    for (let i = 0; i < items.length; i++){
        items[i].style.visibility = vis;
        items[i].style.pointerEvents = point;
    }
}

.trigger {
  width: 200px;
  height: 53px;
  /*
    border: 1px solid black;
    background: green;
    */
}

.menu {
  width: 200px;
  pointer-events: visible;
}

.menu a {
  background-color: #eee;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
}

.menu a:hover {
  background-color: #ccc;
}

.menu a.active {
  background-color: #04AA6D;
  color: white;
}

.items {
  font-size: 50px;
  opacity: 0;
  position: relative;
  top: -20px;
  cursor: pointer;
  pointer-events: none;
  transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
}

.trigger:hover .items {
  opacity: 1;
  cursor: pointer;
  transform: translate(0px, 20px);
}

#menuBtn {
  border: 5px solid black;
}

<p>I am lost</p>
<div class="trigger">
  <div class="menu" id="menuList">
    <a href="#" id="menuBtn">Menu</a>
    <div class="items">
      <a href="#" class="items">One</a>
      <a href="#" class="items">Two</a>
      <a href="#" class="items">Three</a>
      <a href="#" class="items">Four</a>
    </div>
  </div>
</div>

Answer 1

I guess that issue can solve without js. Just change hover event to a #menuBtn and .items and insert reset pointer-events: initial . And should changing link class from items to item, because you applying styles to the group of links and the links itself.

.trigger {
  width: 200px;
  height: 53px;
  /*
    border: 1px solid black;
    background: green;
    */
}

.menu {
  width: 200px;
  pointer-events: visible;
}

.menu a {
  background-color: #eee;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
}

.menu a:hover {
  background-color: #ccc;
}

.menu a.active {
  background-color: #04aa6d;
  color: white;
}

.items {
  font-size: 50px;
  opacity: 0;
  position: relative;
  top: -20px;
  cursor: pointer;
  pointer-events: none;
  transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
}

#menuBtn:hover + .items, /* Add event to #menuBtn */
.items:hover { /* Keep hover effect on the .items */
  opacity: 1;
  cursor: pointer;
  transform: translate(0px, 20px);
  pointer-events: initial; /* Reset pointer-events */
}

#menuBtn {
  border: 5px solid black;
}

<div class="trigger">
  <div class="menu" id="menuList">
    <a href="#" id="menuBtn">Menu</a>
    <div class="items">
      <a href="#" class="item">One</a>
      <!--  Changed items to item  -->
      <a href="#" class="item">Two</a>
      <!--  Changed items to item  -->
      <a href="#" class="item">Three</a>
      <!--  Changed items to item  -->
      <a href="#" class="item">Four</a>
      <!--  Changed items to item  -->
    </div>
  </div>
</div>

Answer 2

Issue was ur items was position:relative so it actually is in same position as they are visible,So need to make them relatable only when hover otherwise make it position:absolute

.item-div{
  position: absolute;
}
.trigger:hover .items {
  position:relative;
}

let items = document.getElementsByClassName('items');
let menuBtn = document.getElementById('menuBtn');
let menuList = document.getElementById('menuList');
let menuClass = document.getElementsByClassName('menu');

menuBtn.addEventListener('mouseenter', func, false);
menuList.addEventListener('mouseleave',func2, false);


//visibilityToggle('hidden', 'none');

function func() {
    console.log('out');
    //visibilityToggle('visible', 'visible');
}

function func2() {

   //visibilityToggle('hidden', 'none');
   console.log('in');
}

function visibilityToggle(vis, point) {
    for (let i = 0; i < items.length; i++){
        items[i].style.visibility = vis;
        items[i].style.pointerEvents = point;
    }
}

.trigger {
  width: 200px;
  height: 53px;
  /*
    border: 1px solid black;
    background: green;
    */
}

.menu {
  width: 200px;
  pointer-events: visible;
  position:relative;
}

.menu a {
  background-color: #eee;
  color: black;
  display: block;
  padding: 12px;
  text-decoration: none;
}

.menu a:hover {
  background-color: #ccc;
}
.item-div{
position: absolute;
width: 100%
}
.menu a.active {
  background-color: #04AA6D;
  color: white;
}

.items {
  font-size: 50px;
  opacity: 0;
  
  top: -20px;
  cursor: pointer;
  pointer-events: none;
  transition: opacity 400ms ease-in-out, transform 400ms ease-in-out;
}

.trigger:hover .items {
  opacity: 1;
  cursor: pointer;
  transform: translate(0px, 20px);
  position:relative;
}

#menuBtn {
  border: 5px solid black;
}
p:first-child {
  text-decoration: line-through;
}

<p>I am lost</p>
<p>Your are Alive</p>
<div class="trigger">
  <div class="menu" id="menuList">
    <a href="#" id="menuBtn">Menu</a>
    <div class="items item-div">
      <a href="#" class="items">One</a>
      <a href="#" class="items">Two</a>
      <a href="#" class="items">Three</a>
      <a href="#" class="items">Four</a>
    </div>
  </div>
</div>