在CSS第八课讲解了如何制作水平和纵向导航，然后拖到了第十八课才讲解下拉菜单，为什么呢？

因为下拉菜单必须要在明白了相对和绝对定位后才能讲解。如果你没有搞定CSS十六课和CSS十七课，建议你出门左拐下两层楼，先看完相对定位和绝对定位再来学习下拉菜单吧。

下拉菜单作为导航目录较多的网站的必备武器，的确可以实现用最少的空间放置最多的目录。在PC电脑端，大型的下拉菜单很好用，但是到了平板手机移动端，受到屏幕大小的限制，一般都会削减不必要的菜单，然后利用下拉菜单以达到最少的占用空间。

查看案例   下载案例

一、PC端下拉菜单的HTML结构

其实就是无序列表的嵌套关系，关键是嵌套的无序列表的位置。

<div class="nav">
    <ul class="clearfix">
    	<li><a href="#" class="current">首页</a></li>
        <li><a href="#">创意素材</a>
            <ul>
            	<li><a href="#">psd原稿</a></li>
        	<li><a href="#">javascript特效</a></li>
        	<li><a href="#">矢量素材</a></li>
            </ul>
        </li>
        <li><a href="#">作品</a>
            <ul>
            	<li><a href="#">psd原稿</a></li>
        	<li><a href="#">javascript特效</a></li>
        	<li><a href="#">矢量素材</a></li>
            </ul>
        
        </li>
        <li><a href="#">视频</a></li>
        <li><a href="#">论坛</a></li>     
    </ul>
</div>

被嵌套的ul放在某个li的里面，li里面的a标签的后面。千万不要放到a标签的里面了。因为嵌套列表，ul是属于li的子元素。

二、PC端下拉菜单的主要CSS代码

注意，这里的下拉菜单ul只设置了position:absolute，并没有设置偏移值，也没有为li设置相对定位，为什么呢？仔细阅读相对和绝对定位两篇文章就可以了解了。

.nav{
	width:600px;
	padding-left:20px;
	background-color:#000;}
.nav>ul>li{   /*代表只选取子元素，而不是后代元素*/
	float:left;
	}
.nav ul ul{
	position:absolute;
	display:none;
	z-index:10;
	}
.nav>ul>li:hover ul{
	display:block;
	}
.nav a{
	display:block;
	padding:10px 20px;
	background-color:#000;
	color:#FFF;
	text-decoration:none;
	font-weight:bold;
	white-space:nowrap;/*强制文字不换行*/
	transition:background-color .2s linear;
	}
.nav a:hover,.nav a.current,.nav>ul>li:hover>a{
	background-color:#E92E74;}

三、移动端下拉菜单HTML代码

在移动端，没有嵌套的无序列表，只是把li标签里面的a标签和ul取了出来。

<div class="mobilenav">
    <a href="#" id="mbnav"><i class="fa fa-th"></i></a>
    <ul id="navlist" class="none">
            <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
            <li><a href="#" class="current"><i class="fa fa-code"></i> HTML教程</a></li>
            <li><a href="#"><i class="fa fa-eye"></i> CSS教程</a></li>
            <li><a href="#"><i class="fa fa-gear"></i> javascript教程</a></li>
            <li><a href="#"><i class="fa fa-gears"></i> jQuery教程</a></li>
            <li><a href="#"><i class="fa fa-edit"></i> 教学反思</a></li>
            <li><a href="#"><i class="fa fa-star"></i> 学习笔记</a></li>
        </ul>
</div>

这里在导航目录前面使用了字体图标的方式，不明白的童鞋可以看这篇文章：利用FontAwesome字体实现小图标的插入

在移动端，不存在鼠标经过（hover）的事件，只能通过点击（click）实现下拉菜单的显示和隐藏。

四、移动端下拉菜单主要CSS代码

.mobilenav{
	width:70px;
	height:50px;
	margin-left:200px;
	position:relative;/*设置为相对定位，可以控制绝对定位的下拉菜单*/
	float:left;
	margin-right:50px;}
.mobilenav a{
	display:block;
	background-color:#000;
	color:#fff;
	padding:15px 20px;
	text-decoration:none;
	white-space:nowrap;
	transition:background-color .2s linear;}
.mobilenav a:hover{
	background-color:#25921D;}
.mobilenav>a{
	text-align:center;
	padding:17px 0;}
.mobilenav ul{
	position:absolute;
	right:0;
	top:50px;
	}

这里因为绝对定位设置了偏移值，所以必须为父元素设置相对定位进行限制。

五、为下拉菜单效果添加javascript脚本

<script type="text/javascript">
//javascript完成第一个移动端下拉菜单
window.onload=function(){
	var links=document.getElementById("mbnav");
	var list=document.getElementById("navlist");
	links.onclick=function(){
		oldclassName=list.className;
		if(oldclassName.indexOf("none")>-1){//判断class的值是否存在none这个属性值，如果没有，返回-1，有，返回下标值。
			newclassName=list.className.replace("none","");	//如果有，则去掉none这个class属性值。
			list.className=newclassName;
		}
		else{
			if(oldclassName==""){//判断class的值是否为空
				list.className="none";//如果为空，则直接赋值
			}else{
				list.className+=" none";//如果不为空，则追加class值。
				}
			}
		}
	}
</script>

这里使用的是对class进行添加或者删除none来实现对display值的切换。

六、利用jQuery实现下拉菜单的显示或隐藏

jQuery是一个使用非常广泛的javascript库，可以用更简洁的代码完成更棒的效果。“write less，do more！”

//jQuery完成第二个移动端下拉菜单	
$(function(){
	$("#mbnav1").click(function(){
		$("#navlist1").slideToggle();})
	})

具体的效果可以下载案例查看，没有提供下载的，只提供了查看案例的，可以用“网页另存为”的方式保存案例到本地电脑上。