<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
body{
text-align: center;
}
.parent{
display: inline-block;
}
li{
width: 300px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 14px;
color: #fff;
}
.title{
background: red;
}
.child{
background: #666;
display: none;
}
.parent:hover .child{
display: block;
}
.kuang{
width: 200px;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 5px;
background: deepskyblue;
margin: 100px auto;
position: relative;
}
.kuang:after{
content: "";
display: block;
clear: both;
width: 0;
height: 0;
border: 10px solid transparent;
border-right: 10px solid deepskyblue;
position: absolute;
left: -20px;
top: 8px;
}
</style>
</head>
<body>
<ul class="parent">
<li class="title">项目一</li>
<li>
<ul class="child">
<li>fdsjjhv</li>
<li>fdsjjhv</li>
<li>fdsjjhv</li>
<li>fdsjjhv</li>
</ul>
</ul>
<!-- 气泡对话框-->
<p class="kuang">dklasdkulusfhu</p>
</body>
</html>
效果图
效果图.png
