悬停菜单延迟关闭

Question

我想在鼠标悬停菜单中添加延迟。这是我的代码笔：http://codepen.io/anon/pen/MYjzVb

请注意，我已经将这些行用于CSS过渡：

-webkit-transition: visibility 0.65s ease-in;
-moz-transition: visibility 0.65s ease-in;

但这行不通。我正在使用Chrome浏览器，也尝试在Firefox中查看它，但这无济于事。

请帮忙！

Answer 1

1- 不带动画：

/**RESETING BROWSER STYLE*/
*{box-sizing: border-box; padding: 0; margin: 0}
/**SETTING THE ROOT ELEMENT BACKGROUND*/
:root{background: #ccc}
/**REMOVING THE STYLE ON ALL LIST IN [id=panel]*/
[id=panel] li{
    list-style-type: none
}
/**INIT OUR DROP MENU*/
.drop_menu {
    background: #10BDF5;
    height: 25px
}
/* SUBMENU position:absolute AND OPACITY INSTEAD OF VISIBILITY and ease-out not ease-in*/
.drop_menu ul {
    position: absolute;
    left: 0;
    top: 28px;
    height: 0; /**SET THIS TO ZERO SINCE WE CAN'T ANIMATE display: none*/
    overflow: hidden; /**YOU NEED THIS TO HIDE THE LIST*/
    background:#51C7ED;
    border-bottom: 5px solid transparent;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    opacity: 0; /**DO NOT DISPLAY THE LIST ON INIT STATE*/
    transition:opacity 0 5s linear, height 0 5s linear,border-bottom 0 5s linear/**TRANSITION ON OPACITY WITHOUT DELAY BUT ON HEIGHT WITH A DELAY GREATER OR EGAL THE OPACITY ANIMATION DURATION*/
}
.drop_menu li:hover ul {
    transition:height 0s ease-out ;/**TRANSITION ONLY ON HEIGHT*/
    opacity: 1;
    border-bottom: 5px solid #1292BB;
    height: 76px /**SET THE HEIGHT ON MOUVE IN*/
}
/**GIVING position: relative TO THE PARENT OF OUR UNORDERED LIST SINCE IT HAS position:absolute */
.drop_menu li { float:left; position: relative}
.drop_menu li a {
    padding:3px 6px;
    display:block;
    color:#FFF;
    text-decoration:none;
    font-size: 11px;
    line-height: 22px;
}

.drop_menu li:hover { position:relative; background:#51C7ED; }
.drop_menu ul a {
    padding:1px 4px;
    display:block;
    width:150px;
    font-size: 11px;
    text-indent:11px;
    background-color:#10BDF5;
}
.drop_menu li:hover ul li a {
    padding:1px 4px;
    display:block;
    width:150px;
    font-size: 11px;
    text-indent:11px;
    background-color:#10BDF5;
}
.drop_menu li:hover ul li a:hover { background:#51C7ED }
#panel {
    background: #10BDF5;
    color: #FFF;
    font-size: 11px;
    text-align: left;
    border: 1px solid #30B3DE;
    padding: 3px 4px
        
}

<div id="panel">
    <ul class="drop_menu">
    <li><a href="upgrade.php">Upgrade Account</a></li>
    <li><a href="link.php">Link One</a>
    	<ul>
    		<li><a href="link.php">link</a></li>
    		<li><a href="link.php">link</a></li>
    		<li><a href="link.php">link</a></li>
    	</ul>
    </li>
    <li><a href="link.php">Link Two</a></li>
    </ul>
</div>

2-带动画

/**RESETING BROWSER STYLE*/
*{box-sizing: border-box; padding: 0; margin: 0}
/**SETTING THE ROOT ELEMENT BACKGROUND*/
:root{background: #ccc}
/**REMOVING THE STYLE ON ALL LIST IN [id=panel]*/
[id=panel] li{
    list-style-type: none
}
/**INIT OUR DROP MENU*/
.drop_menu {
    background: #10BDF5;
    height: 25px
}
/* SUBMENU position:absolute AND OPACITY INSTEAD OF VISIBILITY and ease-out not ease-in*/
.drop_menu ul {
    position: absolute;
    left: 0;
    top: 28px;
    height: 0; /**SET THIS TO ZERO SINCE WE CAN'T ANIMATE display: none*/
    overflow: hidden; /**YOU NEED THIS TO HIDE THE LIST*/
    background:#51C7ED;
    border-bottom: 5px solid transparent;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    opacity: 0; /**DO NOT DISPLAY THE LIST ON INIT STATE*/
    transition:opacity 0.65s ease-out, height 0 0.68s linear /**TRANSITION ON OPACITY WITHOUT DELAY BUT ON HEIGHT WITH A DELAY GREATER OR EGAL THE OPACITY ANIMATION DURATION*/
}
.drop_menu li:hover ul {
    transition:height 0s ease-out ;/**TRANSITION ONLY ON HEIGHT*/
    opacity: 1;
    border-bottom: 5px solid #1292BB;
    height: 76px /**SET THE HEIGHT ON MOUVE IN*/
}
/**GIVING position: relative TO THE PARENT OF OUR UNORDERED LIST SINCE IT HAS position:absolute */
.drop_menu li { float:left; position: relative}
.drop_menu li a {
    padding:3px 6px;
    display:block;
    color:#FFF;
    text-decoration:none;
    font-size: 11px;
    line-height: 22px;
}

.drop_menu li:hover { position:relative; background:#51C7ED; }
.drop_menu ul a {
    padding:1px 4px;
    display:block;
    width:150px;
    font-size: 11px;
    text-indent:11px;
    background-color:#10BDF5;
}
.drop_menu li:hover ul li a {
    padding:1px 4px;
    display:block;
    width:150px;
    font-size: 11px;
    text-indent:11px;
    background-color:#10BDF5;
}
.drop_menu li:hover ul li a:hover { background:#51C7ED }
#panel {
    background: #10BDF5;
    color: #FFF;
    font-size: 11px;
    text-align: left;
    border: 1px solid #30B3DE;
    padding: 3px 4px
        
}

<div id="panel">
    <ul class="drop_menu">
    <li><a href="upgrade.php">Upgrade Account</a></li>
    <li><a href="link.php">Link One</a>
    	<ul>
    		<li><a href="link.php">link</a></li>
    		<li><a href="link.php">link</a></li>
    		<li><a href="link.php">link</a></li>
    	</ul>
    </li>
    <li><a href="link.php">Link Two</a></li>
    </ul>
</div>

Answer 2

您可以使用 JavaScript 来处理mouseenter和mouseleave事件，并使用 setTimeout() 来处理mouseleave事件的延迟（5s）。

您可以通过变量 delay 来设置延迟。

更新的代码笔

var items = document.querySelectorAll('.drop_menu > li');
var delay = 5000;
for (i = 0; i < items.length; i++) {
  items[i].addEventListener('mouseenter', function() {
    var c = this.children
    for (j = 0; j < c.length; j++) {
      if (c[j].localName == 'ul') {
        c[j].style.display = 'block';
        c[j].style.position = 'absolute';
      }
    }
  });
  items[i].addEventListener('mouseleave', function() {
    mouseLeave(this, j);
  });
}
function mouseLeave(el, j) {
  setTimeout(function() {
    var c = el.children;
    for (j = 0; j < c.length; j++) {
      if (c[j].localName == 'ul') {
        c[j].style.display = 'none';
      }
    }
  }, delay)
}

.drop_menu {
  background: #10BDF5;
  padding: 0;
  margin: 0;
  list-style-type: none;
  height: 25px;
}
.drop_menu li {
  display: inline-block;
}
.drop_menu li a {
  padding: 3px 6px;
  display: block;
  color: #FFF;
  text-decoration: none;
  font-size: 11px;
  line-height: 22px;
}
/* Submenu */
.drop_menu ul {
  position: absolute;
  display: none;
  list-style-type: none;
}
.drop_menu > li {
  position: relative;
}
.drop_menu li:hover {
  background: #51C7ED;
}
.drop_menu li ul {
  left: 0px;
  top: 28px;
  background: #51C7ED;
  padding: 0px;
  border-bottom: 5px solid #1292BB;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.drop_menu li ul li a {
  padding: 1px 4px;
  display: block;
  width: 150px;
  font-size: 11px;
  text-indent: 11px;
  background-color: #10BDF5;
}
.drop_menu li:hover ul li a:hover {
  background: #51C7ED;
}
#panel {
  background: #10BDF5;
  color: #FFF;
  font-size: 11px;
  text-align: left;
  border: 1px solid #30B3DE;
  padding: 3px 4px;
}

<div id="panel">
  <ul class="drop_menu">
    <li><a href="upgrade.php">Upgrade Account</a>
    </li>
    <li><a href="link.php">Link One</a>
      <ul>
        <li><a href="link.php">link</a>
        </li>
        <li><a href="link.php">link</a>
        </li>
        <li><a href="link.php">link</a>
        </li>
      </ul>
    </li>
    <li><a href="link.php">Link Two</a>
    </li>
  </ul>
</div>