HTML部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> <!-- 导入css文件 --> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <ul class="ul1"> <li class="li1">网站首页 <ul class="ul11"> <li class="li11"><a href="#">企业简介</a></li> <li>企业文化</li> <li>企业构架</li> <li>企业证书</li> </ul> </li> <li class="li2">企业概况 </li> <li class="li3">产品中心</li> <li class="li4">新闻中心</li> <li class="li5">联系我们</li> </ul> </body> </html>CSS部分
* { padding: 0; margin: 0; list-style: none; text-decoration:none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .ul1{ width: 450px; margin: 50px; background-color: rgb(209, 207, 207); padding: 20px; } .ul1>li{ position: relative; display: inline-block; color: rgb(238, 22, 22); } .ul11{ visibility: hidden; width: 300px; background-color: #F3F3F3; color: rgb(247, 133, 133); text-align: center; border-radius: 6px; padding: 5px 5px; position: absolute; z-index: 2; top: 170%; left: 15%; margin-left: -60px; } .ul11>li{ display: inline-block; } .ul1:hover .ul11{ visibility: visible; } .ul1 .ul11::after { content: ""; position: absolute; bottom: 100%; right: 80%; /* margin-left: 135%; */ border-width: 5px; border-style: solid; border-color: transparent transparent black transparent; }二级菜单使用绝对定位，父级使用相对定位，才能保证鼠标移动子级依然显示。
