Set CSS only menu disappear delay for submenus

Question

I'm trying to have the sub menu items disappear after a certain amount of time using CSS only. Sadly if I have more than one sub menu and hover over the next sub menu the other one has not yet disappeared. Any way to make the previous sub menu disappear when the next sub menu is show with CSS only?

It wouldn't be hard for me to write a JQuery script to achieve this but would nice if I could do it using css. Would there be any JS/JQuery plugins to recommend if this is not possible with CSS?

http://codepen.io/anon/pen/aBPBbj

nav > ul > li {
  display: inline-block
}
nav > ul > li ul {
  visibility: hidden;
  position: absolute;
  top: 105%;
  left: 0;
  transition: 0.2s 1s;
}
nav > ul > li:hover ul {
  visibility: visible;
  transition-delay: 0s;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav li {
  width: 100px;
  background: #eee;
  margin: 2px;
  position: relative;
  padding: 10px;
}
nav a {
  display: block;
}
    
body {
  padding: 10px;
}

<nav>
  <ul>
    <li>
      Dropdown
      <ul>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>
    </li>
    <li>
      Dropdown
      <ul>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
      </ul>
    </li>
  </ul>
</nav>

score 0 · Answer 1 · answered Dec 16 '16 at 14:03

0

Try to remove transition: 0.2s 1s;

answered Dec 16 '16 at 14:03

rinatoptimus

427
1
5
21

Like I said in my first sentence: "I'm trying to have the sub menu items disappear after a certain amount of time using CSS only." – inControl Dec 16 '16 at 14:06
1

It sounds like OP wants to maintain the delay but only if another sub menu isn't hovered over. @inControl, I'd highly recommend using JS/jQuery for this – Fueled By Coffee Dec 16 '16 at 14:11
I can't understand. You want them disappear after a certain amount of time. Now when you hover over the next sub menu the other one has not yet disappeared - as you want. I've read prev comment, seems like now I know what you want. – rinatoptimus Dec 16 '16 at 14:11
That's indeed what I mean, sorry for the confusion. – inControl Dec 16 '16 at 14:15

score 0 · Answer 2 · answered Dec 16 '16 at 14:24

0

Just change the tarnsition time as shown below code.

nav > ul > li ul {
  visibility: hidden;
  position: absolute;
  top: 105%;
  left: 0;
  transition: 0.2s;
}

answered Dec 16 '16 at 14:24

rajiv

64
1
6

score 0 · Answer 3 · answered Dec 16 '16 at 14:43

Try this example of code:

<ul id="mainNav">
<li>item 1
    <ul>
        <li>sub item 1</li>
        <li>sub item 2</li>
        <li>sub item 3</li>  
    </ul>        
</li>
<li>item 2
    <ul>
        <li>sub item 1</li>
        <li>sub item 2</li>
        <li>sub item 3</li>
        <li>sub item 4</li>  
    </ul>       
</li>
<li>item 3
    <ul>
        <li>sub item 1</li>
        <li>sub item 2</li>
    </ul>       
</li>

ul#mainNav {
float:left;
width:auto;
margin:0; padding:0;
color:white;
list-style-type:none;
}
ul#mainNav > li {
float:left;
display:inline;
position:relative;
padding:5px;
border:1px white solid;
background-color:black;

}
ul#mainNav > li:hover {
background:white;
color:black;
border:1px black solid;
}
ul#mainNav > li:hover ul {
visibility: visible;
opacity: 1;
transition-delay: 0s, 0s;
}
ul#mainNav li ul {
position:absolute;
float:left;
width:100px;
height:0;
padding:10px;
margin:0;
visibility: hidden;
opacity: 0;
transition-property: opacity, visibility;
transition-duration: 1.4s, 0s;
transition-delay: 0s, 0s;
}
ul#mainNav ul li {   
background-color:white;
border:1px black solid;
}
ul#mainNav ul li:hover {
background-color:black;
border:1px white solid;
color:white;

visibility: hidden;
opacity: 0;
transition-property: opacity, visibility;
transition-duration: 0s, 0s;
transition-delay: 0s, 0s;
}

Still not it, the effect im trying to achieve is like this: https://jsfiddle.net/jkanckr3/ — inControl, Dec 16 '16 at 15:11

score 0 · Accepted Answer · answered Dec 19 '16 at 08:32

Seeing as no one proposed a working CSS only solution apparently the only way to achieve this is through javascript/JQuery.

https://jsfiddle.net/jkanckr3/

<nav>
  <ul>
    <li>
      Dropdown
      <ul>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></a></li>
      </ul>
    </li>
    <li>
      Dropdown
      <ul>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></a></li>
      </ul>
    </li>
  </ul>
</nav>

var timeout;

$('nav > ul > li').on({
    mouseenter: function () {
        clearTimeout(timeout);
        $('nav > ul > li > ul').hide();
        $('ul', this).show();
    },
    mouseleave: function () {
        var self = this;
        timeout = setTimeout(function() {
            $('ul', self).hide();
        }, 500);
    }
});

nav > ul > li {
  display: inline-block
}
nav > ul > li ul {
  display: none;
  position: absolute;
  top: 105%;
  left: 0;
}
nav > ul > li:hover ul {
  //visibility: visible;
}
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav li {
  width: 100px;
  background: #eee;
  margin: 2px;
  position: relative;
  padding: 10px;
}
nav a {
  display: block;

}

body {
  padding: 10px;
}

Set CSS only menu disappear delay for submenus

4 Answers4