网页制作下拉菜单代码（HTML+CSS+JQUERY）
网页制作时，为了排版的原因，需要制作下拉菜单，下面就来分享一下网页制作下拉菜单代码。（相关教程：网页制作初级入门教程）
实现上面的下拉菜单，所需的网页制作下拉菜单代码由三部分组成：HTML代码+CSS代码+JQUERY代码
HTML代码（内容可以根据自己需要修改，看不懂HTML代码？可以学习一下html视频教程）
<h1>本文介绍网页制作下拉菜单代码，来源：学做网站论坛https://www.xuewangzhan.com/</h1>
<nav>
<ul class="dropdown">
<li class="drop"><a href="#">jQuery</a>
<ul class="sub_menu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Lipsum</a></li>
<li><a href="#">Consectetur </a></li>
<li><a href="#">Duis</a></li>
<li><a href="#">Sed</a></li>
<li><a href="#">Natus</a></li>
<li><a href="#">Excepteur</a></li>
<li><a href="#">Voluptas</a></li>
<li><a href="#">Voluptate</a></li>
<li><a href="#">Malorum</a></li>
<li><a href="#">Bonorum</a></li>
<li><a href="#">Nemo</a></li>
<li><a href="#">Quisquam</a></li>
<li><a href="#">Adipisci </a></li>
<li><a href="#">Excepteur</a></li>
<li><a href="#">Consectetur </a></li>
<li><a href="#">Duis</a></li>
<li><a href="#">Voluptate</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Lipsum</a></li>
</ul>
</li>
<li class="drop"><a href="#">jQuery插件库</a>
<ul class="sub_menu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Lipsum</a></li>
<li><a href="#">Consectetur </a></li>
<li><a href="#">Duis</a></li>
<li><a href="#">Sed</a></li>
<li><a href="#">Natus</a></li>
<li><a href="#">Excepteur</a></li>
<li><a href="#">Voluptas</a></li>
<li><a href="#">Voluptate</a></li>
<li><a href="#">Malorum</a></li>
<li><a href="#">Bonorum</a></li>
<li><a href="#">Nemo</a></li>
<li><a href="#">Quisquam</a></li>
</ul>
</li>
<li class="drop"><a href="#">jQuery特效</a>
<ul class="sub_menu">
<li><a href="#">Lorem</a></li>
<li><a href="#">Ipsum</a></li>
<li><a href="#">Dolor</a></li>
<li><a href="#">Lipsum</a></li>
<li><a href="#">Consectetur </a></li>
</ul>
</li>
<li><a href="#">CSS3代码</a> </li>
</ul>
</nav>
CSS代码：
nav{width:550px;margin:1em auto}ul{margin:0;padding:0;list-style:none}ul.dropdown{position:relative;width:100%}ul.dropdown li{font-weight:700;float:left;width:180px;position:relative;background:#ecf0f1}ul.dropdown a:hover{color:#000}ul.dropdown li a{display:block;padding:20px 8px;color:#34495e;position:relative;z-index:2000;text-align:center;text-decoration:none;font-weight:300}ul.dropdown li a:hover,ul.dropdown li a.hover{background:#3498db;position:relative;color:#fff}ul.dropdown ul{display:none;position:absolute;top:0;left:0;width:180px;z-index:1000}ul.dropdown ul li{font-weight:400;background:#f6f6f6;color:#000;border-bottom:1px solid #ccc}ul.dropdown ul li a{display:block;color:#34495e!important;background:#eee!important}ul.dropdown ul li a:hover{display:block;background:#3498db!important;color:#fff!important}.drop>a{position:relative}.drop>a:after{content:"";position:absolute;right:10px;top:40%;border-left:5px solid transparent;border-top:5px solid #333;border-right:5px solid transparent;z-index:999}.drop>a:hover:after{content:"";border-left:5px solid transparent;border-top:5px solid #fff;border-right:5px solid transparent}
JQUERY代码：
<script src='http://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.js'></script>
<script>
var maxHeight=400;$(function(){$(".dropdown > li").hover(function(){var $container=$(this),$list=$container.find("ul"),$anchor=$container.find("a"),height=$list.height()*1.1,multiplier=height/maxHeight;$container.data("origHeight",$container.height());$anchor.addClass("hover");$list.show().css({paddingTop:$container.data("origHeight")});if(multiplier>1){$container.css({height:maxHeight,overflow:"hidden"}).mousemove(function(e){var offset=$container.offset();var relativeY=((e.pageY-offset.top)*multiplier)-($container.data("origHeight")*multiplier);if(relativeY>$container.data("origHeight")){$list.css("top",-relativeY+$container.data("origHeight"));};});}},function(){var $el=$(this);$el.height($(this).data("origHeight")).find("ul").css({top:0}).hide().end().find("a").removeClass("hover");});});
</script>
通过使用上面三个部分组成的网页制作下拉菜单代码，就可以实现网页的下拉菜单功能了。
