经典的 div + css 鼠标 hover 下拉菜单
效果图：
源码：
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
nav {
margin:100px auto;
text-align:center;
}
nav ul {
border-radius:10px;
background:linear-gradient(to bottom,#efefef,#bbbbbb);
padding:0 20px;
display:inline-table;
position:relative;
box-shadow:1px 1px 3px #666;
list-style:none;
}
nav ul ul {
display:none;
list-style:none;
}
nav ul li {
float:left;
list-style:none;
}
nav ul::after {
content:"";
display:block;
clear:both;
list-style:none;
}
nav ul li a {
display:block;
padding:25px 40px;
color:#000;
text-decoration:none;
font-family:"微软雅黑";
}
nav ul li:hover > ul {
display:block;
list-style:none;
}
nav ul li:hover {
background:linear-gradient(to bottom,#4f5964,#5f6975);
list-style:none;
}
nav ul li:hover a {
color:#FFF;
}
nav ul ul {
background:#5f6975;
border-radius:0;
position:absolute;
top:100%;
padding:0;
list-style:none;
}
nav ul ul li {
float:none;
border-top:1px solid #6b727c;
border-bottom:1px solid #575f6a;
list-style:none;
}
nav ul ul li a {
color:#FFF;
}
nav ul ul li a:hover {
background:#4b545f;
}
nav ul ul ul {
width:100%;
position:absolute;
left:100%;
top:50%;
list-style:none;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">导航一</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li><a href="#">导航二</a></li>
<li><a href="#">导航三</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a>
<ul>
<li><a href="#">三级导航</a></li>
<li><a href="#">三级导航</a></li>
<li><a href="#">三级导航</a></li>
</ul>
</li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li><a href="#">导航四</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li><a href="#">导航五</a>
<ul>
<li><a href="#">二级导航</a></li>
<li><a href="#">二级导航</a></li>
</ul>
</li>
<li><a href="#">导航六</a></li>
</ul>
</nav>
</body>
</html>
原文地址：https://www.cnblogs.com/xpwi/p/9905213.html
时间： 2024-10-06 00:35:11