许多网站的导航栏都有浮动的下拉框，根据hover事件来决定下拉框的显示与隐藏。如猎聘的头部导航栏。
先看实现的代码
html：<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" href="test.css"/>
</head>
<body>
<div class="nav-title">
<span class="finsh_order">已完成订单</span>
<div class="order_export">
<p><a href="javascript:orderExport();">导出已完成订单</a></p>
</div>
</div>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
$('.<span style="color:#ff6666;">nav-title</span>').hover(function(){
$('.order_export').show();
},function(){
$('.order_export').hide();
});
</script>
</body>
</html>css：.nav-title{
<span style="color:#ff0000;">position:relative;</span> margin-left:500px;
}
.order_export{
<span style="color:#ff0000;">position: absolute;</span>
z-index: 1;
left:1px;
text-align: left;
background-color: #39474e;
padding-left:8px;
padding-right:30px;
display:none;
}
.order_export a{
color:#ddd;
font-size:14px;
}
.order_export a:hover{
color:#fff;
}下拉框order_export的position要设为absolute，而order_export的上一级div.nav-title的position要设为relative。此时order_export就可以跳出当前全局的文档流，而根据其父元素nav-tittle的位置而布局。值得一说的是，order_export的position设为absolute之后，跳出文档流后是根据谁来布局，取决于其祖元素谁显示声明了是relative。比如当前.nva-title的position没有设为relative，order_export的相对布局对应的就是其最近的显示声明了position为relative的祖元素。
注意的几点：
1. 如果order_export的top和left都没有设置值，这时order_export是相对于其父元素布局，紧挨着其父元素（不管其父元素是否显示声明了position为relative）。如果order_export声明了top或者left，就如上所述。
2.浮动下来框就根据父元素nav-title的hover事件来判定。值得一提的是top的值不能大于span.finsh_order的高度。因为如果大于了，span.finsh_order和.order_export之间就会有空隙，从而导致hover事件的执行效果不是想要的，即鼠标始终不能点击到order_export，因为想点击它的时候，它已经隐藏了。最好的方式就是top不设值，这样order_export就会紧挨着布局。
3596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
