效果图:
大体思路:
鼠标移至头像时,二级菜单出现,鼠标移至二级菜单,可以对子菜单进行选择,鼠标移出子菜单,子菜单消失。
子菜单使用position:absolute绝对定位到父级菜单下方。
<div class="content">
<img src="img/index/head.png" alt="头像" class="nav-portrait " />
</div>
<ul class="nav-second-ul">
<li class="bb">
<a>
耳朵不睡觉
</a>
</li>
<li>
<a>
我的收藏
</a>
</li>
<li>
<a>
我的观看记录
</a>
</li>
<li>
<a>
我的VIP
</a>
</li>
<li>
<a>
资料和账号
</a>
</li>
<li class="bt">
<a>
退出
</a>
</li>
</ul>
.content {
width: 300px;
margin: 200px auto;
position: relative;
}
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.nav-portrait {
border-radius: 50%;
height: 50px;
width: 50px;
}
.nav-second-ul {
position: absolute;
border: 1px solid #e1e1e1;
border-radius: 5px;
background-color: white;
z-index: 10000;
top: 260px;
left: 765px;
display: none;
}
.nav-second-ul li {
padding: 10px 20px;
}
.nav-second-ul li:hover {
background-color: #e1e1e1;
color: white;
}
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script>
$(function() {
/*注意这里的鼠标事件,只给父菜单定义了一个mouseover,用来触发子菜单的显示,但不添加mouseout事件,否则鼠标还没移到子菜单上,它就消失了。*/
$(".nav-portrait").mouseover(function() {
$(".nav-second-ul").css('display', 'block');
});
$(".nav-second-ul").mouseover(function() {
$(".nav-second-ul").css('display', 'block');
});
$(".nav-second-ul").mouseout(function() {
$(".nav-second-ul").css('display', 'none');
});
})
</script>