本篇体验使用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. 20165203 2017-2018-2 《Java程序设计》第一周学习总结
			
    20165203 2017-2018-2<Java程序设计>第一周学习总结 教材学习内容总结 (一)Java的地位 Java是面向对象编程,并涉及网络.多线程等重要的基础知识,是一门很好的 ...
    
			
    2. 
						
  2. Java 常用的几个lambda表达式
			
    Lambda表达式是Java 8一个非常重要的新特性.它像方法一样,利用很简单的语法来定义参数列表和方法体.目前Lambda表达式已经成为高级编程语言的标配,像Python,Swift,C#等都已经支 ...
    
			
    3. 
						
  3. Kotlin尝试
			
    Kotlin 是一种静态类型的编程语言,可在 Java 虚拟机上运行,也可以编译为 JavaScript 源代码.其主要发展来自位于俄罗斯圣彼得堡的 JetBrains 程序员团队.虽然语法与 Jav ...
    
			
    4. 
						
  4. day7  面向对象class()学习
			
        面向过程 VS 面向对象     编程范式 编程是程序员用特定的语法+数据结构+算法组成的代码来告诉计算机如何执行任务的过程,一个程序是程序员为了得到一个任务结果而编写的一组指令的集合,正所谓 ...
    
			
    5. 
						
  5. 实现nlp文本生成中的beam search解码器
			
    自然语言处理任务,比如caption generation(图片描述文本生成).机器翻译中,都需要进行词或者字符序列的生成.常见于seq2seq模型或者RNNLM模型中. 这篇博文主要介绍文本生成解码 ...
    
			
    6. 
						
  6. 操作系统基础梳理--进程&线程
			
    1.举个栗子 1.1.知乎一形象例子 [摘自知乎]比如说十几年前,马化腾在写QQ,假设他那个时候不懂多进程多线程.然后他就开始写啦,这玩意儿不简单吗,不就是用户输入什么,把信息打包发到另一个用户,再显 ...
    
			
    7. 
						
  7. JavaScript中正则的使用（1）
			
    通过例子学习正则中的常见语法(1) $num javascript var a = 'javascript'; var b = a.replace(/(java)(script)/gi, '$2-$1 ...
    
			
    8. 
						
  8. java程序员修炼之道——大牛告诉我们应该好好学习与修炼以下知识与技能
			
    —————————— ASP.Net+Android+IOS开发..Net培训.期待与您交流! —————————— 一:Java语言学习(对线程(thread),串行化,反射,网络编程,JNI技术, ...
    
			
    9. 
						
  9. Two-stage rotation animation is deprecated. This application should use the smoother single-stage an
			
    问题出在rootViewController同时包含UITabBarController和UINavigationController. 几经尝试,最后发现,在设置为window.rootViewCo ...
    
			
    10. 
						
  10. idea集成项目管理工具 --- Maven   并且【配置tomcat】
			
    介绍: 1.项目管理工具 POM    Porject Object Model 2.可以管理项目中的的jar包依赖 3.maven   jar包中央仓库:http://mvnrepository.c ...
    
			
    11.