Not much to say, just go to the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
text-align: center;
}
.one li{
float: left;
width: 100px;
height: 30px;
color: green;
background: greenyellow;
border: 1px solid red;
list-style: none;
line-height: 30px;
}
.two li{
float: left;
width: 100px;
height: 30px;
color: green;
background: rgb(248, 103, 183);
border: 1px solid red;
list-style: none;
line-height: 30px;
display: none;
}
.dijia{
position: relative;
}
.one .two .three{
position: absolute;
top: 0px;
left: 100px;
display: none;
}
.three li{
/* float: left; */
width: 100px;
height: 30px;
color: green;
border: 1px solid red;
list-style: none;
line-height: 30px;
}
/* 划过一级菜单背景色变为pink */
.one li:hover{
background: pink;
}
/* 划过一级菜单下的li，二级菜单li出现 */
.one li:hover .two li{
display: block;
}
/* 划过二级菜单li，背景色变为红色 */
.two li:hover{
background: red;
}
/* 划过二级菜单li,三级菜单出现 */
.two li:hover .three{
display: block;
}
/* 划过二级菜单li，三级菜单背景色变为orange */
.two li:hover .three li{
background: orange;
}
.two li .three li:hover{
background: blue;
}
</style>
</head>
<body>
<ul class="one">
<li>吃
<ul class="two">
<li class="dijia">麻辣香锅
<ul class="three">
<li>只香不辣</li>
<li>微辣</li>
<li>中辣</li>
<li>麻辣</li>
</ul>
</li>
<li>火锅</li>
<li>烤鱼</li>
<li>牛排</li>
<li>面</li>
<li>米饭</li>
</ul>
</li>
<li>喝</li>
<li>玩</li>
<li>乐</li>
<li>酒店/注册</li>
</ul>
</body>
</html>