经典的 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>
