本篇体验使用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. Effective STL 学习笔记： Thread Safety and STL Container
			
    Table of Contents 1. STL, Thread and SGI 2. STL and Lock 2.1. RAII 2.2. Use Lock in STL 1 STL, Threa ...
    
			
    2. 
						
  2. 搜索入门之dfs--经典的迷宫问题解析
			
    今天来谈一下dfs的入门,以前看到的dfs入门,那真的是入门吗,都是把dfs的实现步骤往那一贴,看完是知道dfs的步骤了,但是对于代码实现还是没有概念.今天准备写点自己的心得,真的是字面意思--入门. ...
    
			
    3. 
						
  3. MEF实现设计上的“松耦合”（一）
			
    1.什么是MEF 先来看msdn上面的解释:MEF(Managed Extensibility Framework)是一个用于创建可扩展的轻型应用程序的库. 应用程序开发人员可利用该库发现并使用扩展, ...
    
			
    4. 
						
  4. mongo体系架构学习
			
    MongoDB是一个可移植的数据库,它在流行的每一个平台上都可以使用,即所谓的跨平台性,在不同的操作系统上虽然略有差别,但是从整体架构上来看,MongoDB在不同的平台上是一样的,如数据逻辑结构和数据 ...
    
			
    5. 
						
  5. PHP 识别 java 8位 des 加密和 解密方式
			
    代码及使用说明: <?php /** *PHP 识别 java 8位密钥的加密和解密方式 *@desc 加密方式 通用 */ class DES { var $key; var $iv; //偏 ...
    
			
    6. 
						
  6. keras  Variable  set_value错误解决
			
    问题: 如: from keras import backend as K varib = K.variable(0.) new_value = np.min([0.1, 1.0]) varib.se ...
    
			
    7. 
						
  7. 43：n个骰子的点数
			
    算法分析: 算法1.基于递归求色子点数,时间效率不高 现在我们考虑如何统计每一个点数出现的次数.要向求出n个骰子的点数和,可以先把n个骰子分为两堆:第一堆只有一个,另一个有n-1个.单独的那一个有可能 ...
    
			
    8. 
						
  8. numpy.base_repr 方法解释
			
    首先看官方文档: numpy.base_repr(number, base=2, padding=0) 将给定的 number 值,换算成给定的 base 进制(默认 2 进制)的值,以字符串的形式返 ...
    
			
    9. 
						
  9. Wannafly挑战赛9 B - 数一数
			
    链接:https://www.nowcoder.com/acm/contest/71/B来源:牛客网 题目描述 设s,t为两个字符串,定义f(s,t) = t的子串中,与s相等的串的个数.如f(&qu ...
    
			
    10. 
						
  10. RMQ_第一弹_Sparse Table
			
    title: RMQ_第一弹_Sparse Table date: 2018-09-21 21:33:45 tags: acm RMQ ST dp 数据结构 算法 categories: ACM 概述 ...
    
			
    11.