为子菜单

Question

我尝试让子菜单项在一定时间后仅使用CSS消失。遗憾的是，如果我有多个子菜单并将鼠标悬停在下一个子菜单上，则另一个子菜单尚未消失。当仅使用CSS显示下一个子菜单时，是否有任何方法可以使上一个子菜单消失？

编写一个JQuery脚本来实现这一目标并不困难，但如果我能用css做到这一点会很好。如果使用CSS无法实现，可以使用任何JS / JQuery插件吗？

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试删除转换：0.2s 1s;

Answer 2

只需更改tarnsition时间，如下图所示。

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

Answer 3

尝试this代码示例：

<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;
}

Answer 4

看来没有人提出一个有效的CSS解决方案，显然唯一的方法就是通过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;
}