css实现四级导航菜单
2023-07-27阅读：2533
演示效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parent {
display: block;
position: relative;
float: left;
line-height: 50px;
padding: 0 10px;
background-color: #4FA0D8;
/*border-right:#CCC 1px solid;*/
}
.parent a{
margin: 10px;
color: #FFFFFF;
text-decoration:
none;
}
.menu .child li {
padding: 0 10px;
margin: unset;
}
.child a{
margin: unset;
}
.parent:hover > ul {
display:block;
position:absolute;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom:#CCC 1px solid;
border-right:#CCC 1px solid;
width:100%;
}
.child li a{
color: #000000;
}
ul{
list-style: none;
margin: 0;padding: 0px;
min-width:10em;
}
ul ul ul{
left: 100%;top: 0;
margin-left:1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand{
font-size:12px;
float:right;
margin-right:5px;
}
ul.menu {
margin: 0 auto;
}
</style>
</head>
<body>
<ul>
<li><a href="#">Recent Toys</a>
</li>
<li><a href="#">Recent Toys</a>
<ul>
<li><a href="#">Yoyo</a></li>
<li><a href="#">Doctor Kit</a></li>
<li><a href="#">Uno Cards</a></li>
</ul>
</li>
<li><a href="#">Toys Category</a>
<ul>
<li><a href="#">Battery Toys</a></li>
<li><a href="#">Remote Toys <span>»</span></a>
<ul>
<li><a href="#">Cars</a></li>
<li><a href="#">Aeroplane</a></li>
<li><a href="#">Helicopter</a></li>
</ul>
</li>
<li><a href="#">Soft Toys</a>
</li>
<li><a href="#">Magnet Toys</a></li>
</ul>
</li>
<li><a href="#">Toys Category</a>
<ul>
<li><a href="#">Battery Toys</a></li>
<li><a href="#">Remote Toys <span>»</span></a>
<ul>
<li><a href="#">Cars</a></li>
<li><a href="#">Aeroplane</a></li>
<li><a href="#">Remote Toys <span>»</span></a>
<ul>
<li><a href="#">Cars</a></li>
<li><a href="#">Aeroplane</a></li>
<li><a href="#">Helicopter</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Soft Toys</a>
</li>
<li><a href="#">Magnet Toys</a></li>
</ul>
</li>
</ul>
</body>
</html>