Show child on parent hover instead of on parent OR child hover

Question

I've created a simple dropdown menu that scales and fades in whenever I hover over the parent list item, "Services". Everything works as it should except for when I hover over the child element (dropdown menu) which also makes it appear. I understand that simply hiding it with opacity will not prevent a user from hovering over it but it allows for the 0.4s transition to take effect. If I were to hide it with display:none or visibility:hidden, the transition becomes instant. I'm considering using jQuery to solve this but was wondering if there is a solution based purely in CSS.

JSFiddle

 * { margin: 0; padding: 0; font-family: Montserrat; } li { list-style: none; } a { text-decoration: none; } nav { background-color: white; height: 60px; display: flex; justify-content: center; align-items: center; } nav > ul > li { display: inline-block; position: relative; height: 60px; cursor: pointer; } nav a { color: rgba(165,175,185,1); } nav > ul > li > a { padding: 0 20px; height: 100%; line-height: 60px; } nav > ul > li:hover > a { color: rgba(105,115,125,1); } nav > ul > li:first-of-type { margin-right: auto; } .services-list-container { position: absolute; width: 200px; top: 100%; height: auto; opacity: 0; transform: rotateX(-20deg) scale(0.9,0.9); transform-origin: 0 0; transition: transform 0.4s ease, opacity 0.4s ease; } .services-list-container ul { background-color: white; box-shadow: 0 6px 16px rgba(40, 40, 90, 0.15); position: relative; margin-top: 30px; } .services-list-container a { padding: 20px; display: block; } .services-list-container a:hover { padding: 20px; display: block; background-color: rgba(235,240,245,1); } .hover:hover .services-list-container { transform: rotateX(0deg) scale(1,1); opacity: 1; transition: transform 0.4s ease, opacity 0.4s ease; } 

 <nav> <ul> <li> <a href="#">[Logo]</a> </li> <li> <a href="#">About</a> </li> <li class="hover"> <a href="#">Services</a> <div class="services-list-container"> <ul> <li> <a href="#">Information</a> </li> <li> <a href="#">Technology</a> </li> <li> <a href="#">Training</a> </li> <li> <a href="#">Project Support</a> </li> </ul> </div> </li> <li> <a href="#">News</a> </li> <li> <a href="#">Jobs</a> </li> <li> <a href="#">Contact</a> </li> </ul> </nav> 

Answer 1

Please check if this is what you want. Submenu is hidden until the hover takes place.

 * { margin: 0; padding: 0; font-family: Montserrat; } li { list-style: none; } a { text-decoration: none; } nav { background-color: white; height: 60px; display: flex; justify-content: center; align-items: center; } nav>ul>li { display: inline-block; position: relative; height: 60px; cursor: pointer; } nav a { color: rgba(165, 175, 185, 1); } nav>ul>li>a { padding: 0 20px; line-height: 60px; } nav>ul>li:hover>a { color: rgba(105, 115, 125, 1); } nav>ul>li:hover .services-list-container { display: inline-block; } nav>ul>li:first-of-type { margin-right: auto; } .services-list-container { visibility: hidden; z-index: -1; position: absolute; width: 200px; top: 100%; opacity: 0; transition: opacity .4s ease; } .services-list-container ul { background-color: white; box-shadow: 0 6px 16px rgba(40, 40, 90, 0.15); position: relative; } .services-list-container a { padding: 20px; display: block; } .services-list-container a:hover { background-color: rgba(235, 240, 245, 1); } .hover:hover .services-list-container { z-index: 0; visibility: visible; opacity: 1; } 

 <nav> <ul> <li> <a href="#">[Logo]</a> </li> <li> <a href="#">About</a> </li> <li class="hover"> <a href="#">Services</a> <div class="services-list-container"> <ul> <li> <a href="#">Information</a> </li> <li> <a href="#">Technology</a> </li> <li> <a href="#">Training</a> </li> <li> <a href="#">Project Support</a> </li> </ul> </div> </li> <li> <a href="#">News</a> </li> <li> <a href="#">Jobs</a> </li> <li> <a href="#">Contact</a> </li> </ul> 

Answer 2

不是您将鼠标悬停在child元素上方，而是您的列表元素从height：60px如此高，以至于当您将鼠标悬停在单词下方时，它仍然在li元素上方。

Answer 3

If you are targeting supporting browsers you can use pointer-events to prevent the submenu from causing a hover mouse event

Give your element pointer-events:none to disable

.services-list-container {
  pointer-events:none;
  position: absolute;
  width: 200px;
  top: 100%;
  height: auto;
  opacity: 0;
  transform: rotateX(-20deg) scale(0.9,0.9);
  transform-origin: 0 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

Then to make sure you can still enter the submenu, reset pointer-events while your .hover elements are hovered

.hover:hover .services-list-container {
  pointer-events:all;
  transform: rotateX(0deg) scale(1,1);
  opacity: 1;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

Demo

 * { margin: 0; padding: 0; font-family: Montserrat; } li { list-style: none; } a { text-decoration: none; } nav { background-color: white; height: 60px; display: flex; justify-content: center; align-items: center; } nav > ul > li { display: inline-block; position: relative; height: 60px; cursor: pointer; } nav a { color: rgba(165,175,185,1); } nav > ul > li > a { padding: 0 20px; height: 100%; line-height: 60px; } nav > ul > li:hover > a { color: rgba(105,115,125,1); } nav > ul > li:first-of-type { margin-right: auto; } .services-list-container { pointer-events:none; position: absolute; width: 200px; top: 100%; height: auto; opacity: 0; transform: rotateX(-20deg) scale(0.9,0.9); transform-origin: 0 0; transition: transform 0.4s ease, opacity 0.4s ease; } .services-list-container ul { background-color: white; box-shadow: 0 6px 16px rgba(40, 40, 90, 0.15); position: relative; margin-top: 30px; } .services-list-container a { padding: 20px; display: block; } .services-list-container a:hover { padding: 20px; display: block; background-color: rgba(235,240,245,1); } .hover:hover .services-list-container { pointer-events:all; transform: rotateX(0deg) scale(1,1); opacity: 1; transition: transform 0.4s ease, opacity 0.4s ease; } 

 <nav> <ul> <li> <a href="#">[Logo]</a> </li> <li> <a href="#">About</a> </li> <li class="hover"> <a href="#">Services</a> <div class="services-list-container"> <ul> <li> <a href="#">Information</a> </li> <li> <a href="#">Technology</a> </li> <li> <a href="#">Training</a> </li> <li> <a href="#">Project Support</a> </li> </ul> </div> </li> <li> <a href="#">News</a> </li> <li> <a href="#">Jobs</a> </li> <li> <a href="#">Contact</a> </li> </ul> </nav> 

Answer 4

A combination of visibility:hidden; with the opacity changes helps you to keep that animation while still preventing it from triggering outside of the intended menu area:

https://jsfiddle.net/4wg4sbqy/ CSS:

* {
      margin: 0;
      padding: 0;
      font-family: Montserrat;
    }

    li {
      list-style: none;
    }

    a {
      text-decoration: none;
    }

    nav {
      background-color: white;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    nav > ul > li {
      display: inline-block;
      position: relative;
      height: 60px;
      cursor: pointer;
    }

    nav a {
      color: rgba(165,175,185,1);
    }

    nav > ul > li > a {
      padding: 0 20px;
      height: 100%;
      line-height: 60px;
    }

    nav > ul > li:hover > a {
      color: rgba(105,115,125,1);
    }

    nav > ul > li:first-of-type {
      margin-right: auto;
    }

    .services-list-container {
      position: absolute;
      width: 200px;
      top: 100%;
      height: auto;
      opacity: 0;
      visibility: hidden;
      transform: rotateX(-20deg) scale(0.9,0.9);
        transform-origin: 0 0;
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .services-list-container ul {

      background-color: white;
      box-shadow: 0 6px 16px rgba(40, 40, 90, 0.15);
      position: relative;
      margin-top: 30px;
    }

    .services-list-container a {
      padding: 20px;
      display: block;
    }

    .services-list-container a:hover {
      padding: 20px;
      display: block;
      background-color: rgba(235,240,245,1);
    }

    .hover:hover .services-list-container {
      visibility: visible;
      transform: rotateX(0deg) scale(1,1);
        opacity: 1;
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

HTML:

   <nav>
  <ul>
    <li>
      <a href="#">[Logo]</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li class="hover">
      <a href="#">Services</a>
      <div class="services-list-container">
        <ul>
          <li>
            <a href="#">Information</a>
          </li>
          <li>
            <a href="#">Technology</a>
          </li>
          <li>
            <a href="#">Training</a>
          </li>
          <li>
            <a href="#">Project Support</a>
          </li>
        </ul>
      </div>
    </li>
    <li>
      <a href="#">News</a>
    </li>
    <li>
      <a href="#">Jobs</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>