html 菜单 重新定位,5.通过定位实现二级菜单

本文将要为您介绍的是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;

}

• Lorem.
• Culpa.
• Consequuntur?

• 客户服务

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam deleniti voluptate fugit distinctio, totam iure delectus aliquam aspernatur amet hic.

• Ex.

index.html

代码中的reset.css文件，参考下面网站：https://www.cnblogs.com/lanshanxiao/p/12663192.html

效果展示：

5.通过定位实现二级菜单就为您介绍到这里，感谢您关注懒咪学编程c.lanmit.com.

本文地址：https://c.lanmit.com/Webqianduan/htmlyucss/37639.html