本篇体验使用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. MATLAB读写Excel文件中的数据
			
    读取: %读取filename文件中指定表的数据,存入dataRead矩阵中 dataRead=xlsread('filename.xls',sheet); 写入: %将矩阵dataWrite中的数据 ...
    
			
    2. 
						
  2. Owin 自定义中间件
			
    /// <summary> /// 自定义的中间件 /// </summary> public class CustomMiddleware : OwinMiddleware  ...
    
			
    3. 
						
  3. CCF CSP 201604-4 游戏
			
    CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201604-4 游戏 问题描述 小明在玩一个电脑游戏,游戏在一个n×m的方格图上进行,小明控制 ...
    
			
    4. 
						
  4. Linux 中 &、jobs、fg、bg 等命令
			
    参考  Unix 或 Linux 中 &.jobs.fg.bg 等命令的使用方法 对之前文章的一个补充: linux 命令后台运行 这篇还是比较简单的,稍微一带而过 fg.bg.jobs.&a ...
    
			
    5. 
						
  5. MFC+WinPcap编写一个嗅探器之三（WinPcap）
			
    介绍程序模块前,这一节再复习一下WinPcap WinPcap开发一个嗅探器的主要步骤如下: (1)获取嗅探设备 WinPcap提供了pcap_findalldevs_ex() 函数来实现这个功能:  ...
    
			
    6. 
						
  6. JSP的学习二（指令与标签）
			
    一:page指令 1.JSP的指令 放在<%@ 指令 属性=“值”%> 主要有page,include,tablib. 2.page指令 用于定义JSP页面的各种属性,作用于是JSP的整个 ...
    
			
    7. 
						
  7. CentOS 升级Python3.X和pip3
			
    目的:实现python3 and python2 共存,pip2 and pip3共存 一.安装依赖 yum install openssl-devel -y yum install zlib-dev ...
    
			
    8. 
						
  8. Ubuntu18.04 之jdk安装与环境配置
			
    1.oracle官网下载压缩包. 下载地址为: https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133 ...
    
			
    9. 
						
  9. 历史文章分类汇总-Anaconda安装第三方包（whl文件）
			
    本文主要是对公众号之前发布的文章进行分类整理,方面大家查阅,以后会不定期对文章汇总进行更新与发布.   一.推荐阅读: Anaconda安装第三方包(whl文件) 福布斯系列之数据分析思路篇 福布斯系 ...
    
			
    10. 
						
  10. [漏洞复现]CVE-2010-2883 Adobe Reader 打开pdf电脑即刻中招
			
    1.漏洞概述: CVE-2010-2883漏洞原理:“Adobe Reader在处理CoolType字体文件的sing表时,存在栈溢出漏洞,当打开特制的恶意PDF文件时,可允许任意代码远程执行.” 影 ...
    
			
    11.