菜单悬停（伪类练习）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,ul{
margin: 0px;
padding:0px;
}
ul li{
list-style: none;
float: left;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
background: #ccc;
}
.muni-1{
background: #999;
}
ul li:hover{
background: #999;
}
.memi-1 li ul{
display: none;
}
.memi-1>li:hover ul{
display: block;
}
.mini-5{
float: right;
}
.mini-3:hover .mini-4 .mini-5{
display: none;
}
.mini-3 ul .mini-4:hover .mini-5{
display: block;
}
</style>
</head>
<body>
<ul class="memi-1">
<li class="muni-2">a
<ul >
<li>人</li>
<li>生</li>
<li>寂</li>
<li>寂</li>
<li>如</li>
<li>雪</li>
</ul>
</li>
<li class="mini-3">b
<ul>
<li>人</li>
<li>生</li>
<li>寂</li>
<li>寂</li>
<li>如</li>
<li class="mini-4">雪
<ul class="mini-5">
<li>情</li>
<li>如</li>
<li>梦</li>
</ul>
</li>
</ul>
</li>
<li>c
<ul>
<li>人</li>
<li>生</li>
<li>寂</li>
<li>寂</li>
<li>如</li>
<li>雪</li>
</ul>
</li>
<li>d
<ul>
<li>人</li>
<li>生</li>
<li>寂</li>
<li>寂</li>
<li>如</li>
<li>雪</li>
</ul>
</li>
<li>e
<ul>
<li>人</li>
<li>生</li>
<li>寂</li>
<li>寂</li>
<li>如</li>
<li>雪</li>
</ul>
</li>
</ul>
</body>
</html>
