本篇体验使用jQuery制作水平的、多级的、下拉菜单。
下拉菜单的html部分如下。
<body><nav class="main-nav"><ul class="nav-list"><li><a href="#">主页</a></li><li><a href="#">产品</a></li><li><a href="#">服务</a><ul class="dropdown"><li><a href="#">网页设计</a></li><li><a href="#">图形设计</a></li><li><a href="#">视频制作</a></li></ul></li><li><a href="#">联系我们</a></li></ul></nav></body>
写一个DropDownMenu.css样式文件。先把一级菜单样式设置好。其中的一个关键点是：需要把li的position属性设置为relative，然后再把li的子元素a的position属性设置为absolute，这样，a就可以以li为参照进行绝对定位了。
.main-nav {background-color: #333;border-bottom: 2px solid #aaa;width: 100%;height: 40px;}.nav-list {list-style: none;padding-left: 0;width: 900px;margin: 0 auto;}.nav-list > li {margin: 0;float: left;width: 120px;height: 40px;position: relative; /*设置relative后，li的子元素可以在li中绝对定位*/}.nav-list > li > a {color: #ddd;text-decoration: none;position: absolute;width: 120px; /*与li的宽度一致，保证a的区域大小与li一致，方便点击*/height: 40px; /*与li的高度一致，保证a的区域大小与li一致，方便点击*/text-align: center;padding-top: 12px;box-sizing: border-box;}.nav-list > li > a:hover {background-color: #555;}
以上，box-sizing属性用来定义一块区域所包含的内容，它的属性值包括：
box-sizing: content-box|border-box|initial|inherit;
设置为border-box，意味着width和height属性只包括区域内内容、padding、border,不包括margin。
设置为content-box，意味着width和height属性只包括区域内内容，不包括border, padding, margin。
设置为inherit，意味着width和height属性包括的内容和父级元素一致。
设置为initial，意味着width和height属性包括区域内内容、padding、border、margin。
在主页面引用该样式文件。
<link href="DropDownMenu.css" rel="stylesheet" />
一级菜单设置完了，接下来设置下拉菜单部分。需要把ul设置为相对定位，因为它要相对于父级li来定位。
.dropdown {display: none;list-style: none;position: relative;top: 40px;padding-left: 0;width: 120px;}.dropdown li {background-color: #555;position: relative;width: 120px;height: 35px;}.dropdown li a {color: #ddd;text-decoration: none;position: absolute;width: 120px;height: 35px;padding: 10px 0 0 10px;box-sizing: border-box;}.dropdown li a:hover {background-color: #777;}
还有一点，我们希望在显示菜单的时候，首先隐藏二级菜单。在.dropdown增加一个display属性。
.dropdown {display: none;list-style: none;position: relative;top: 40px;padding-left: 0;width: 120px;}
最后，就到了jquery部分了。我们希望:当把鼠标移动到具有二级菜单的li时，让对应的二级ul出现，而当鼠标移出具有二级菜单的li时，让对应的二级ul消失。
<script src="Scripts/jquery-2.1.1.min.js"></script><script type="text/javascript">$(function() {$(‘li‘).has(‘.dropdown‘).hover(function() {$(this).find(‘.dropdown‘).slideDown();},function() {$(this).find(‘.dropdown‘).slideUp();});});</script>
总结：
1、为了确保li和子元素a区域大小一致，需要把li设置为相对定位,把a设置为绝对定位，并且两者的宽和高保持一致。
2、为了确保二级菜单ul的位置在一级li的正下方，需要把二级菜单的ul设置为相对定位。
3、jquery中$(this)是指当前上下文。
jQuery制作水平多级下拉菜单