经典的 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>经典的 div + css 鼠标 hover 下拉菜单
原文地址：https://www.cnblogs.com/xpwi/p/9905213.html