<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;padding: 0;
}
#div-nav{
width: 100%;height: 70px;
background: deepskyblue;
}
/*一级菜单*/
.menu-1{
width: 140px;height: 70px;
background: lightgray;
box-shadow: 2px 0px 5px black;
margin-left: 30px;
text-align: center;line-height: 70px;
font-size: 20px;
}
.menu-1:hover{
background: dimgray;
}
/*二级菜单*/
#div-blogs-1{
margin-left: 140px;display: none;margin-top: -70px;
}
.menu-2{
width: 140px;height: 70px;
background: lightgray;
box-shadow: 2px 0px 5px black;
text-align: center;line-height: 70px;
font-size: 20px;
}
.menu-2:hover{
background: dimgray;
}
/*三级菜单*/
#div-myblogs-1{
position: relative;left: 140px;top: -70px;display: none;
}
.menu-3{
width: 140px;height: 70px;
background: lightgray;
box-shadow: 2px 0px 5px black;
text-align: center;line-height: 70px;
font-size: 20px;
}
#div-blogs:hover #div-blogs-1{
display: block;
}
#div-myblogs:hover #div-myblogs-1{
display: block;
}
.menu-3:hover{
background: dimgray;
}
</style>
</head>
<body>
<div id="div-nav">
<!--一级菜单-->
<div class="menu-1" id="div-user">用户</div>
<div class="menu-1" id="div-blogs">博客
<!--二级菜单-->
<div id="div-blogs-1">
<div class="menu-2" id="div-write">写博客</div>
<div class="menu-2" id="div-watch">看博客</div>
<div class="menu-2" id="div-myblogs">我的博客
<!--三级菜单-->
<div id="div-myblogs-1">
<div class="menu-3" id="div-all">全部博客</div>
<div class="menu-3" id="div-origin">只看原创</div>
<div class="menu-3" id="div-reprint">只看转载</div>
</div>
</div>
</div>
</div>
<div class="menu-1" id="div-flash">闪存</div>
<div class="menu-1" id="div-integral">积分</div>
<div class="menu-1" id="div-comment">评论</div>
<div class="menu-1" id="div-attention">关注</div>
</div>
</body>
</html>
html中利用hover制作三级菜单
最新推荐文章于 2022-10-12 17:27:13 发布