<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
.lis{
display: flex;
}
.btn{
width: 80px;
text-align: center;
margin: 5px;
background-color: #eee;
position: relative;
}
.item{
display: none;
position: absolute;
}
.item li{
border: 1px solid #e4a616;
margin: 0;
padding: 0;
border-top: none;
line-height: 30px;
width: 80px;
height: 30px;
}
.item li:hover{
background-color: #faf1da;
color: #cc9107;
cursor: pointer;
}
</style>
<div class="xiala">
<ul class="lis">
<li class="btn">微博
<ul class="item">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li class="btn">博客
<ul class="item">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
<li class="btn">邮箱
<ul class="item">
<li>私信</li>
<li>评论</li>
<li>@我</li>
</ul>
</li>
</ul>
</div>
<script>
var lis = document.querySelector('.lis').children
for (let i = 0;i < lis.length; i++){
lis[i].onmouseover = function(){
this.querySelector('.item').style.display = 'block'
}
lis[i].onmouseout = function(){
this.querySelector('.item').style.display = 'none'
}
}
</script>
</body>
</html>
新浪下拉菜单代码
最新推荐文章于 2024-08-24 09:00:00 发布