Hover is triggered when mouse over child element

Question

I am trying to use transition effects on a drop down menu and using display: none stops the transition from happening so instead I am using opacity.

A strange thing is happening. When the mouse hovers over the see-through sub menu it becomes visible but I have selected this behaviour to happen when mousing over parent <li> and I am not mousing over it. The child '` is absolutely positioned below it.

In the snippet below, move your mouse underneath post and the sub menu will appear. I only want it to appear when the mouse is ontop of the post box in the black border.

There is something going on here I don't understand.

menu-main-menu-container {
  position: relative;
}

ul.menu {
  background: lightblue;
  padding: 0;
}
ul.menu > li {
  border: 1px solid black;
  position: relative;
  display: inline-block;
  height: 30px;
  padding-right: 20px;
  padding-left: 20px;
}
ul.menu > li > ul.sub-menu {
  top: 100%;
}
ul.menu li.menu-item-has-children:hover > ul.sub-menu {
  opacity: 1;
}

ul.sub-menu {
  padding: 0;
  left: 0;
  list-style: none;
  transition: all 1s ease;
  position: absolute;
  opacity: 0;
  background-color: lightyellow;
}
ul.sub-menu ul.sub-menu {
  left: 100%;
  top: 0;
  background-color: grey;
}
ul.sub-menu li {
  position: relative;
  padding: 20px;
}

<div class="menu-main-menu-container">
  <ul id="menu-main-menu" class="menu">
    <li id="menu-item-2385" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-2385 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/">Home</a></li>
    <li id="menu-item-2386" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2386 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/get-quote-inner/">testimonials</a></li>
    <li id="menu-item-2387" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2387 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/services-inner/">Login</a></li>
    <li id="menu-item-2388" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2388 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/blog-post-8/">post</a>
      <ul class="sub-menu">
        <li id="menu-item-2646" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2646 menu-item-depth-1"><a href="http://site3.wpmu-subdomain.dev/gallery/">Gallery</a></li>
        <li id="menu-item-2647" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2647 menu-item-depth-1"><a href="http://site3.wpmu-subdomain.dev/services/">Services</a>
          <ul class="sub-menu">
            <li id="menu-item-2390" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2390 menu-item-depth-2"><a href="http://site3.wpmu-subdomain.dev/product/this-is-a-product/">product</a></li>
            <li id="menu-item-2649" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2649 menu-item-depth-2"><a href="http://site3.wpmu-subdomain.dev/login/">Login</a></li>
          </ul>
        </li>
        <li id="menu-item-2648" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2648 menu-item-depth-1"><a href="http://site3.wpmu-subdomain.dev/contactus/">Contactus</a></li>
      </ul>
    </li>
    <li id="menu-item-2389" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2389 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/service-fence-inner/">page</a></li>
    <li id="menu-item-2391" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2391 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/expert/gagan-goraya/">expert</a></li>
  </ul>
</div>

When I inspect the <li> it is not resizing over the child absolutely positioned <ul> so why is it triggering the li:hover effect?

Answer 1

Changing the opacity will only change the actual visibility to you, the user.

The browser and the DOM will both render the element anyway. The space of the element is used, it's just not visible to you.

An easy fix would be setting a max-height to 0 and changing it to something you're never going to reach on hover. This way, the space it will usually take is limited to 0. Also regulating your overflows will help.

menu-main-menu-container {
  position: relative;
}

ul.menu {
  background: lightblue;
  padding: 0;
}
ul.menu > li {
  border: 1px solid black;
  position: relative;
  display: inline-block;
  height: 30px;
  padding-right: 20px;
  padding-left: 20px;
}
ul.menu > li > ul.sub-menu {
  top: 100%;
}
ul.menu li.menu-item-has-children:hover > ul.sub-menu {
  opacity: 1;
  max-height: 1000px;
  overflow: visible;
}

ul.sub-menu {
  padding: 0;
  left: 0;
  list-style: none;
  transition: all 1s ease;
  position: absolute;
  opacity: 0;
  max-height: 0px;
  overflow: hidden;
  background-color: lightyellow;
}
ul.sub-menu ul.sub-menu {
  left: 100%;
  top: 0;
  background-color: grey;
  max-height: 1000px;
}
ul.sub-menu li {
  position: relative;
  padding: 20px;
}

<div class="menu-main-menu-container">
  <ul id="menu-main-menu" class="menu">
    <li id="menu-item-2385" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-2385 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/">Home</a></li>
    <li id="menu-item-2386" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2386 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/get-quote-inner/">testimonials</a></li>
    <li id="menu-item-2387" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2387 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/services-inner/">Login</a></li>
    <li id="menu-item-2388" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2388 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/blog-post-8/">post</a>
      <ul class="sub-menu">
        <li id="menu-item-2646" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2646 menu-item-depth-1"><a href="http://site3.wpmu-subdomain.dev/gallery/">Gallery</a></li>
        <li id="menu-item-2647" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-2647 menu-item-depth-1"><a href="http://site3.wpmu-subdomain.dev/services/">Services</a>
          <ul class="sub-menu">
            <li id="menu-item-2390" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2390 menu-item-depth-2"><a href="http://site3.wpmu-subdomain.dev/product/this-is-a-product/">product</a></li>
            <li id="menu-item-2649" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2649 menu-item-depth-2"><a href="http://site3.wpmu-subdomain.dev/login/">Login</a></li>
          </ul>
        </li>
        <li id="menu-item-2648" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2648 menu-item-depth-1"><a href="http://site3.wpmu-subdomain.dev/contactus/">Contactus</a></li>
      </ul>
    </li>
    <li id="menu-item-2389" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2389 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/service-fence-inner/">page</a></li>
    <li id="menu-item-2391" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2391 menu-item-depth-0"><a href="http://site3.wpmu-subdomain.dev/expert/gagan-goraya/">expert</a></li>
  </ul>
</div>

Answer 2

Try using this.

See the child ul with the class sub-menu is a part of li with the class menu-item-has-children so if you hover beneath the li it will consider as li got hovered.

ul.menu > li.menu-item-has-children a:hover + ul.sub-menu {
opacity: 1;
}