头部导航栏(弹出功能菜单)
<div id="head">
<ul>
<li><a href="javascript:;">logo</a></li>
<li><a href="javascript:;">首页</a></li>
<li>
<a href="javascript:;" class="user">用户</a>
<a href="javascript:;" class="exit">退出</a>
</li>
</ul>
</div>
<script>
//退出标签的显示与隐藏
$(".user").hover(
function () {
$(".exit").slideDown();
},
function () {
$(".exit").slideUp();
}
);
//退出标签鼠标滑入时不隐藏
$(".exit").hover(function () {
$(this).stop().show()
},
function () {
$(this).stop().slideUp()
}
)
</script>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style:none;
}
a{
text-decoration: none;
}
#head{
position:fixed;
top:0;
right:0;
left:0;
background: black;
}
#head li{
float:left;
line-height: 60px;
padding-left: 10px;
}
#head a{
color:white;
}
#head li:last-child{
position:relative;
float:right;
padding-right:30px;
}
#head .exit{
position:absolute;
top:40px;
left:5px;
width:40px;
line-height: 30px;
text-align: center;
background: blue;
display: none;
}
</style>