Question

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

我无法弄清楚最后一部分。我尝试了各种过渡，所以这是我到目前为止，有人可以协助吗？

由于

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

但这又一次打开并慢慢关闭菜单

Answer 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

Answer 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

Answer 3

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

如何使下拉菜单延迟关闭

3 个答案: