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

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>
[Logo]
</li>
<li>
About
</li>
<li class="hover">
Services
<div class="services-list-container">
<ul>
<li>
Information
</li>
<li>
Technology
</li>
<li>
Training
</li>
<li>
Project Support
</li>
</ul>
</div>
</li>
<li>
News
</li>
<li>
Jobs
</li>
<li>
Contact
</li>
</ul>
</nav>

Answer 1

It's not that you are hovering over the child element, it's that your list elements are so tall from the height:60px that when you hover under the words, it's still going over the li element.

Answer 2

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>
[Logo]
</li>
<li>
About
</li>
<li class="hover">
Services
<div class="services-list-container">
<ul>
<li>
Information
</li>
<li>
Technology
</li>
<li>
Training
</li>
<li>
Project Support
</li>
</ul>
</div>
</li>
<li>
News
</li>
<li>
Jobs
</li>
<li>
Contact
</li>
</ul>
</nav>

Answer 3

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>
[Logo]
</li>
<li>
About
</li>
<li class="hover">
Services
<div class="services-list-container">
<ul>
<li>
Information
</li>
<li>
Technology
</li>
<li>
Training
</li>
<li>
Project Support
</li>
</ul>
</div>
</li>
<li>
News
</li>
<li>
Jobs
</li>
<li>
Contact
</li>
</ul>
</nav>

Answer 4

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>
[Logo]
</li>
<li>
About
</li>
<li class="hover">
Services
<div class="services-list-container">
<ul>
<li>
Information
</li>
<li>
Technology
</li>
<li>
Training
</li>
<li>
Project Support
</li>
</ul>
</div>
</li>
<li>
News
</li>
<li>
Jobs
</li>
<li>
Contact
</li>
</ul>