5.通过定位实现二级菜单
程序员文章站
2022-06-09 18:01:47
通过定位实现二级菜单：
通过定位实现二级菜单：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<link rel="stylesheet" href="./reset.css">
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
}
.header {
height: 40px;
background-color: #e3e4e5;
}
.header .nav>li{
float:left;
margin:0 20px;
width:150px;
text-align:center;
line-height:40px;
height:40px;
box-sizing: border-box;
position:relative;
}
.header .nav>li:hover{
line-height:38px;
border:1px solid #ccc;
border-bottom:none;
background-color: #fff;
}
.header .nav>li:hover::after{
content:"";
display:block;
width:100%;
height:1px;
background:#fff;
position: absolute;
top:38px;
}
.header .nav>li:hover .secondnav{
width:300px;
border:1px solid #ccc;
position:absolute;
right:-1px;
text-align:left;
display:block;
}
.header .nav>li .secondnav{
display:none;
}
</style>
</head>
<body>
<header class="header">
<ul class="nav clearfix">
<li><a href="">lorem.</a></li>
<li><a href="">culpa.</a></li>
<li><a href="">consequuntur?</a></li>
<li>
<a href="">客户服务</a>
<div class="secondnav">
lorem ipsum dolor sit amet, consectetur adipisicing elit. numquam deleniti voluptate fugit distinctio, totam iure delectus aliquam aspernatur amet hic.
</div>
</li>
<li><a href="">ex.</a></li>
</ul>
</header>
</body>
</html>
代码中的reset.css文件，参考下面网站：https://www.cnblogs.com/lanshanxiao/p/12663192.html
效果展示：