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;
}
二级菜单使用绝对定位,父级使用相对定位,才能保证鼠标移动子级依然显示。