通过定位实现二级菜单：
<!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
效果展示：
