除了JS，下拉菜单也可以直接用CSS做。本文将简要介绍如何实现下拉导航菜单的。
首先上代码，css部分是这样的:
#navul li{float:left;height:46px;position:relative;line-height:46px; font-size:16px; text-align:center;border-left:1px solid #656162;border-right:1px solid #333333}
#navul li.navhome{text-align:center;padding:0 10px;width:50px; background:#00AA98; color:#fff;}
#navul li a:link, #navul li a:visited{display:block;padding:0 20px;color:#FFFFFF;}
#navul li a:hover{color:#eee;text-decoration:none;background:#111}
#navul li ul{visibility:hidden;position:absolute;z-index:10000;top:45px;left:-1px;background:#00AA98;border:#00AA98 1px solid; border-top:none; z-index:999989;}
#navul li ul li{display:block;float:none;margin-right:0px;height:30px;position:relative;line-height:30px;font-size:14px; overflow:hidden; border-bottom:1px solid #049888; border-top:1px solid #13beac;text-align:center;z-index:999999;}
#navul li.navmoon{height:46px;line-height:46px}
#navul li.navmoon a{color:#FFFFFF;}
#navul li.navhome a:hover{color:#FCFF00;}
#navul li.navmoon:hover ul{visibility:visible}
#navul li.navmoon ul a{display:block;width:88px;height:30px;line-height:30px;}
#navul li.navmoon ul a:hover{background:#333;}
HTML代码
<ul id="navul" class="cl"> <li id="nvabar-item-index"><a href="https://www.jiangweishan.com/">首页</a></li> <li id="navbar-category-1"><a href="https://www.jiangweishan.com/">JavaScript</a></li> <li id="navbar-category-16"> <a href="https://www.jiangweishan.com/">HTML</a> <ul> <li><a href="https://www.jiangweishan.com/">HTML4 CSS2</a></li> <li><a href="https://www.jiangweishan.com/">HTML5 CSS3</a></li> </ul> </li> <li id="navbar-category-11"><a href="https://www.jiangweishan.com/">开发工具</a></li> <li id="navbar-category-5"><a href="https://www.jiangweishan.com/">性能优化</a></li> <li id="navbar-category-7"><a href="https://www.jiangweishan.com/">移动开发</a></li> <li id="navbar-category-13"><a href="https://www.jiangweishan.com/">前端教程</a></li> </ul>
其实他的核心是下拉菜单的属性设置
visibility:hidden和visibility:visible
