jQuery实现二级下拉菜单
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>二级下拉菜单</title><style>/* 公共样式 */body,ul,li {margin:0;padding: 0;list-style: none;}.header-nav {position: relative;top: 30px;left: 50%;margin-left: -360px;}/* 一级菜单 */.header-nav .one-nav>li{float: left;width: 90px;height: 40px;background-color: #333333;text-align: center;lineheight: 40px;cursor: pointer;color: #b0b0b0;}.header-nav .one-nav>li:hover {background-color: #424242;color: #ffffff;}/* 二级菜单 */.header-nav .one-nav .two-nav {display: none;}.header-nav .one-nav .two-nav>li {background-color: #424242;border-bottom: 1px solid black;}</style><script src="public/jquery.min.js"></script><script>$(function(){$('.header-nav .one-nav>li').mouseenter(function(){$(this).find('ul').stop().slideDown();});$('.header-nav .one-nav>li').mouseleave(function(){$(this).find('ul').stop().slideUp();});})</script></head><body><nav class="header-nav"><ul class="one-nav"><li><span>一级菜单</span><ul class="two-nav"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li><li><span>一级菜单</span><ul class="two-nav"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li><li><span>一级菜单</span><ul class="two-nav"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li><li><span>一级菜单</span><ul class="two-nav"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li><li><span>一级菜单</span><ul class="two-nav"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li><li><span>一级菜单</span><ul class="two-nav"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li><li><span>一级菜单</span><ul class="two-nav"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li><li><span>一级菜单</span><ul class="two-nav"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li></ul></nav></body></html>
