如何使下拉菜单延迟关闭答案

【问题标题】：How to make Drop Down Menu Delay Close如何使下拉菜单延迟关闭
【发布时间】：2014-05-24 20:50:36
【问题描述】：

我创建了一个工作正常的下拉菜单，但我想要发生的是，一旦您将鼠标悬停在菜单二上并将鼠标从菜单上移到屏幕的另一部分，菜单保持打开五秒钟然后关闭.

我只是想不通最后一部分。我已经尝试了各种转换，所以这就是我目前所做的，有人可以帮忙吗？

谢谢

<style type="text/css">
#example1{

width:200px;
height:50px;
background:#FFFFFF;

}

.parent{

position:relative;
display:block;
width:200px;
height:50px;
float:left;

}


.sub{

visibility:hidden; /* This hides the menu until we hover */
position:absolute;
top:50px;
left:0;
width:200px;
height:250px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
overflow:hidden;

}

.parent:hover .sub{

visibility:visible; /* This makes the menu visible when user hovers */
text-align:center;


}

.sub a{

color:#000;
background:#ffc34c;
display:block;
width:200px;
height:50px;
text-align:center;
line-height:50px;

}

.sub a:hover{

background:#f06000;
color:#fff;

}


/* Drop Down Two: Slider */

#two{

visibility:visible!important;
height:0;
transition:height 0.4s ease-in-out;
-moz-transition:height 0.4s ease-in-out;
-webkit-transition:height 0.4s ease-in-out;
-o-transition:height 0.4s ease-in-out;


}

.parent:hover #two{

height:250px;

}



/* Drop Down Two: Slider with Delay */

#two{

background:#FFFFFF;
border: 1px solid #CECECE;
visibility:visible!important;
height:0;
transition:height 0.4s ease-in-out;
-moz-transition:height 0.4s ease-in-out;
-webkit-transition:height 0.4s ease-in-out;
-o-transition:height 0.4s ease-in-out;

}

.parent:hover #two{

height:250px;

}

#two a{

opacity:0;
transition:opacity 0.4s ease-in-out;
-moz-transition:opacity 0.4s ease-in-out;
-webkit-transition:opacity 0.4s ease-in-out;
-o-transition:opacity 0.4s ease-in-out;
transition-delay:0.4s;
-moz-transition-delay:0.4s;
-webkit-transition-delay:0.4s;
-o-transition-delay:0.4s;

}

.parent:hover #two a{

opacity:1;
    transition: all 0.5s ease 0s;
}

</style>

<div id="example1">


<div class="parent"><a href="#" class="button">Menu Two</a>
<div class="sub" id="two">
                               <div class="error_box"></div>


menu 1<br>
menu 1<br>
menu 1<br>
menu 1<br>
menu 1<br>
menu 1<br>
menu 1<br>
</div>


</div>

我也试过添加：

transition-property: height;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

到下面的样式

#two{

background:#FFFFFF;
border: 1px solid #CECECE;
visibility:visible!important;
height:0;
transition:height 0.4s ease-in-out;
-moz-transition:height 0.4s ease-in-out;
-webkit-transition:height 0.4s ease-in-out;
-o-transition:height 0.4s ease-in-out;

transition-property: height;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}

但这又只是缓慢地打开和关闭菜单

【问题讨论】：

参考这个链接 - w3schools.com/cssref/css3_pr_transition-delay.asp
我之前已经查看过该链接，但无法合并正确的过渡以使其正确，您能帮忙吗？
制作一个小提琴然后我们将能够尝试解决方案
我改变了-webkit-transition:height 0.4s ease-in-out; to -webkit-transition:height 3.4s ease-in-out；但这只是导致菜单打开和关闭缓慢
试试height 0.4s ease-in-out 5s，其中5s是延迟

标签： html css

【解决方案1】：

你必须用height: 250px分割过渡

.parent:hover #two {
    height:250px;
    transition:height 0.4s ease-in-out 0s;
    -moz-transition:height 0.4s ease-in-out 0s;
    -webkit-transition:height 0.4s ease-in-out 0s;
    -o-transition:height 0.4s ease-in-out 0s;
}

这会立即打开菜单，然后height: 0

 #two {
    background:#FFFFFF;
    border: 1px solid #CECECE;
    visibility:visible!important;
    height:0;
    transition:height 0.4s ease-in-out 5s;
    -moz-transition:height 0.4s ease-in-out 5s;
    -webkit-transition:height 0.4s ease-in-out 5s;
    -o-transition:height 0.4s ease-in-out 5s;
}

延迟 5 秒后关闭菜单。

查看全文JSFiddle

【讨论】：

Awesome 完美运行。谢谢，我不知道我哪里出错了！

【解决方案2】：

使用 jQuery。我编辑了你的 css 和 html 代码。

<div id="example1">
<div class="parent"><a href="#" class="button" id="btn" onmouseover="document.getElementById('two').style.display = 'block';$('#two').fadeOut(6000);">Menu Two</a>
<div class="sub" id="two" style="display:none;">
                               <div class="error_box"></div>


menu 1<br>
menu 1<br>
menu 1<br>
menu 1<br>
menu 1<br>
menu 1<br>
menu 1<br>
</div>


</div>

访问jsfiddle

【讨论】：

我确实喜欢这个答案，谢谢，它非常简单，我唯一的问题是它会将下面的代码向下推，而不是放在我目前的其余代码之上有，但谢谢你

【解决方案3】：

子菜单需要两个单独的类。
然后使用 Javascript，使用onmouseover 添加显示子菜单的类..
..and onmouseout 在 5000 毫秒后设置了一个超时来添加隐藏类

【讨论】：