Reputation: 851
I have an unordered list menu in my header that has submenus on parent list items. I've been trying to set the :hover pseudo-class to make the submenus fade in and out when moving the cursor over the links.
The problem is that I can only make them fade in, so when I move the cursor away they don't fade out, they just disappear instantly. I'm not sure what I'm doing wrong, but I've included a second jsfiddle below in which I've managed to achieve the effect I want with some simpler html.
Example 1: https://jsfiddle.net/ornbovv7/2/
Example 2: https://jsfiddle.net/aou6j8gz/1/
My code:
.header {
width:100%;
height:100px;
background-color:#fff;
}
.content {
width:100%;
height:500px;
background-color:pink;
}
nav.main-menu ul {
position:relative;
top:30px;
list-style:none;
}
nav.main-menu ul li {
cursor:pointer;
display:inline-block;
margin:10px 30px 10px 30px;
padding:0px 20px 45px 20px;
}
nav.main-menu ul ul {
position:absolute;
left:-999em;
width:175px;
display:block;
height:auto;
margin:40px 0px 0px 0px;
padding:0;
box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.1);
background-color:#ffffff;
opacity:0;
transition: left 0s ease 0.6s, opacity 0.6s ease 0s;
}
nav.main-menu ul li:hover ul {
left:auto;
opacity:0.9;
transition: left 0s ease 0s, opacity 0.6s ease 0s;
}
nav.main-menu ul ul li {
position:relative;
float: none;
padding: 7px 10px 7px 10px;
}
nav.main-menu ul ul li a {
display:inline-block;
}
<header class="header">
<nav class="main-menu">
<div>
<ul id="menu-header-menu-1" class="menu">
<li>link 1</li>
<li>link 2
<ul class="sub-menu">
<li>sublink 1</li>
<li>sublink 2</li>
<li>sublink 3</li>
<li>sublink 4</li>
<li>sublink 5</li>
</ul>
</li>
<li>link 3
</li>
</ul>
</div>
</nav>
</header>
Upvotes: 2
Views: 7605
Reputation: 106078
left -9999em and auto cannot take a transitions . auto is not a number.
You can avoid this using pointer-events and drop the left coordonates:https://jsfiddle.net/ornbovv7/3/
nav.main-menu ul li ul {
position:absolute;
width:175px;
display:block;
height:auto;
margin:40px 0px 0px 0px;
padding:0;
box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.1);
background-color:#ffffff;
opacity:0;
pointer-events:none;
transition: opacity 0.6s ease 0s;
}
nav.main-menu ul li:hover ul {
left:auto;
pointer-events:auto;
opacity:0.9;
transition: opacity 0.6s ease 0s ;
}
or use left:0; and li in relative position : https://jsfiddle.net/ornbovv7/4/ beside you do need to give a delay for the left transition, so it fades away before to go off the screen area
nav.main-menu ul li {
cursor:pointer;
display:inline-block;
margin:10px 30px 10px 30px;
padding:0px 20px 45px 20px;
position:relative;
}
nav.main-menu ul ul {
position:absolute;
left:-999em;
width:175px;
display:block;
height:auto;
margin:40px 0px 0px 0px;
padding:0;
box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 4px 6px rgba(0,0,0,0.1);
background-color:#ffffff;
opacity:0;
transition: left 0s ease 0.6s, opacity 0.6s ease 0s;
}
nav.main-menu ul li:hover ul {
left:0;
opacity:0.9;
transition: left 0s ease 1s, opacity 0.6s ease 0s;
}
Upvotes: 4
Reputation: 2692
One way is to take advantage of the :not
pseudo tag, in combination with the :hover
. I wrote an article a few years ago on a similar example - you can read it here if you're interested.
I was able to get your first example to work by adding the following:
nav.main-menu ul li:not(:hover) ul {
left:auto;
opacity:0;
transition: left 0s ease 0s, opacity 0.6s ease 0s;
}
Here is a link to the forked fiddle.
Hope I understood the question and goal correctly.
Upvotes: 1