使用定时器、鼠标移动事件
var img = $('#user_head');
var menu = $('.nav_list');
var i=0;
var timer;
img.mouseenter(function () {
clearTimeout(timer)
menu.show()
})
img.mouseleave(function () {
timer = window.setTimeout(function () {
menu.hide()
},500)
})
menu.mouseenter(function () {
clearTimeout(timer)
// menu.css('visibility','vidible')
})
menu.mouseleave(function () {
menu.hide()
})
使用纯css方式
- css
```css
{
padding: 0; margin: 0; list-style: none;
}
/初始化 a /
a{
text-decoration: none; color: deepskyblue;
}
/设置外层导航布局/
.nav-swrap>ul{
display: -webkit-box;
width: 80%;
height: 50px;
margin: 0 auto;
}
/外层li*/
.nav-swrap>ul>li{
-webkit-box-flex: 1;
height: 100%; line-height: 50px;
background-color: #eee;
text-align: center;
}
/内层ul, 绝对定位, 高度为0,保证鼠标移动到二级导航下,不会出现/
.sub-nav{
padding-top: 10px;
width: 100%;
-webkit-perspective: 400px; /* 透视,站在400px前看 /
}
/内层li*/
.sub-nav>li{
background: -webkit-linear-gradient(top, #ccc,#eee);
width: 50%;
margin: 0 auto;
}
.sub-nav{
display: none;
}
.nav-swrap>ul>li>a{
display: inline-block;
height: 100%;
width: 100%;
}
.nav-swrap>ul>li>a:hover+ul,.sub-nav:hover{
display: block;
}