本篇体验使用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. Java - 利用StringEscapeUtils对字符串进行各种转义与反转义
			
    来自:http://blog.csdn.net/chenleixing/article/details/43456987 --------------------------------------- ...
    
			
    2. 
						
  2. 如何读取Hadoop中压缩的文件
			
    最近在处理离线数据导入HBase的问题,涉及从Hdfs中读取gz压缩文件,把思路记录下来,以作备用.具体代码如下: package org.dba.util; import java.io.Buffe ...
    
			
    3. 
						
  3. SQL 根据生日和日期计算年龄
			
    FLOOR(datediff(DY,p.Dob,o.RegisterTime)/365
    
			
    4. 
						
  4. switch case语句
			
    五.switch case语句 1.格式 Switch(表达式) { case 表达式:语句块 break: … default break: } 2.例题 输入年份.月份.日期,判断是否是闰年,并且 ...
    
			
    5. 
						
  5. html-注册邮箱
			
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
			
    6. 
						
  6. java8 - 5
			
    import java.util.ArrayList; import java.util.Arrays; import java.util.Iterator; import java.util.Lis ...
    
			
    7. 
						
  7. Storm（一）Storm的简介与相关概念
			
    一.Storm的简介 官网地址:http://storm.apache.org/ Storm是一个免费开源.分布式.高容错的实时计算系统.Storm令持续不断的流计算变得容易,弥补了Hadoop批处理 ...
    
			
    8. 
						
  8. day4作业模拟实现一个ATM + 购物商城程序
			
    作业需求: 模拟实现一个ATM + 购物商城程序 1.额度 15000或自定义: 2.实现购物商城,买东西加入 购物车,调用信用卡接口结账: 3.可以提现,手续费5%: 4.每月22号出账单,每月10 ...
    
			
    9. 
						
  9. 关于C语言的几个考试编程题目
			
    提交要求:1:邮件名称:学号后三位-题目编号-姓名-期中考试.例如:098-1-沈苗-期中考试2:不用附件提交,直接写邮件,内容包括编程思路(写一段自己对题目的认识.思路.技术细节等).源代码.运行结 ...
    
			
    10. 
						
  10. linux中shell,awk,sed截取字符串方法总结
			
    转自:http://www.cnblogs.com/kinga/p/5772566.html Shell 第一种: ${parameter%word} 最小限度从后面截掉word${parameter ...
    
			
    11.