本文将要为您介绍的是5.通过定位实现二级菜单,具体完成步骤:
通过定位实现二级菜单:
Document.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;
}
index.html
代码中的reset.css文件,参考下面网站:https://www.cnblogs.com/lanshanxiao/p/12663192.html
效果展示:
5.通过定位实现二级菜单就为您介绍到这里,感谢您关注懒咪学编程c.lanmit.com.
本文地址:https://c.lanmit.com/Webqianduan/htmlyucss/37639.html