本篇体验使用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制作水平多级下拉菜单的更多相关文章
	

    
								
  1. jQuery制作一个多彩下拉菜单按钮
		
    最终效果图: html代码: <div id="list"> <div id="btn"> <div class="ic ...
    
		
    2. 
						
  2. jquery实现多级下拉菜单
		
    支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...
    
		
    3. 
						
  3. 基于jQuery带图标的多级下拉菜单
		
    之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...
    
		
    4. 
						
  4. 推荐10个 CSS3 制作的创意下拉菜单效果
		
    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
    
		
    5. 
						
  5. 一款多浏览器兼容的javascript多级下拉菜单
		
    这个多级下拉菜单的脚本大小不到2K,带有动画效果,可以方便地支持多个实例,并且能良好兼容WordPress系统wp_list_cats和wp_list_pages生成的多级列表.要初始化一个菜单,只需 ...
    
		
    6. 
						
  6. 小程序多级下拉菜单demo
		
    小程序多级下拉菜单demo - CSDN博客 https://blog.csdn.net/github_39371177/article/details/80251211
    
		
    7. 
						
  7. CSS技巧分享：如何用css制作横排二级下拉菜单
		
    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
    
		
    8. 
						
  8. bootstrap多级下拉菜单
		
    只需为下拉菜单的任意 <li> 元素添加 .dropdown-submenu 的类,并在该 <li> 元素下添加 .dropdown-menu 类的列表,就可以为该菜单项添加一 ...
    
		
    9. 
						
  9. jQuery/CSS3大屏下拉菜单 自定义子菜单内容
		
    这是一款样式很酷的jQuery/CSS3下拉菜单,首先这款CSS3菜单是宽屏的,主要是下拉菜单非常大气,更重要的是,下拉菜单的内容可以自己定义,也就是说,下拉菜单中可以定义菜单.图片等HTML元素,是 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. JMeter接口&性能测试
			
    JMeter接口测试 目前最新版本发展到5.0版本,需要Java7以上版本环境,下载解压目录后,进入\apache-jmeter-5.0\bin\,双击ApacheJMeter.jar文件启动JMem ...
    
			
    2. 
						
  2. Codeforces Round #146 (Div. 1) C - Cyclical Quest  后缀自动机+最小循环节
			
    #include<bits/stdc++.h> #define LL long long #define fi first #define se second #define mk mak ...
    
			
    3. 
						
  3. Django实战（22）：处理登录和注销
			
    我们已经可以在view函数中判断用户是否已经登录以及获取用户信息: if request.user.is_authenticated(): #判断用户是否已登录 user = request.user ...
    
			
    4. 
						
  4. Elasticsearch环境准备(一)
			
    一.ELKStack简介 中文指南:https://www.gitbook.com/book/chenryn/elk-stack-guide-cn/details ELK Stack包含:Elasti ...
    
			
    5. 
						
  5. HTML5 Canvas游戏开发（四）lufylegend开源库件(下)
			
    一.文本 LTextField对象是lufylegend库件中专门用于显示文本信息的一个对象. 1.文本属性 创建的文本框对象不会自动加入可视化对象列表中.只有手动调用addChild()方法才能使它 ...
    
			
    6. 
						
  6. Hadoop整理二（Hadoop分布式存储系统HDFS）
			
    一.背景 当数据集的大小超过一台独立物理计算机的存储能力时,就有必要对它进行分区(partition) 并存储到若干台单独的计算机上.管理网络中跨多台计算机存储的文件系统称为分布式文件系统 (dist ...
    
			
    7. 
						
  7. 2017-2018-1 20179202《Linux内核原理与分析》第九周作业
			
    进程的切换和系统的一般执行过程 1.知识总结 (1)进程调度的时机: 中断处理过程直接调用schedule(),或者返回用户态时根据need_resched标记调用schedule(). 内核线程是一 ...
    
			
    8. 
						
  8. 装饰 Markdown
			
    利用 Font Awesome 提升 Markdown 的表现能力 Font Awesome 是一个字体和图标工具包,包含人物.动物.建筑.商业.品牌等等各种主题丰富的图标符号,可以通过相应的语法添加 ...
    
			
    9. 
						
  9. CSUOJ 1040 Round-number
			
    Description Most of the time when rounding a given number, it is customary to round to some multiple ...
    
			
    10. 
						
  10. Leaving Auction   CF 749D
			
    题目:http://codeforces.com/problemset/problem/749/D 题目大意: 有n个人竞拍,也有n个叫牌,一个人可以有多个叫价牌,但也可能有一些人根本不叫价 每个叫牌 ...
    
			
    11.