Html
    Css
    Js
* {
	margin:0;
	padding:0;
}
li {
	list-style:none;
}
.nav1 {
	width:1200px;
	height:60px;
	background:#69bded;
	margin:0 auto;
}
#nav .nav1 ul li {
	width:200px;
	line-height:60px;
	text-align:center;
	background:#69bded;
	float:left;
}
#nav .nav1 ul li a {
	color:#000;
	display:block;
	width:200px;
	height:60px;
	text-decoration:none;
}
#nav .nav1 ul li a:hover {
	background:#f5a6ac;
	color:#fff;
	transition:all 0.7s;
}
.nav2 .li {
	position:relative;
}
.nav3 {
	position:obsolute;
	height:0px;
	overflow:hidden;
	transition:height 0.7s;
	-moz-transition:height 0.7s;
	/* Firefox 4 */ -webkit-transition:height 0.7s;
	/* Safari and Chrome */
}
/*就是当鼠标悬浮在li 上面的时候,让他子元素中的 nav3 显示可见*/ 
.nav2 .li:hover .nav3 {
	height:180px;
}
.nav2 .li:nth-child(3):hover .nav3 {
	height:240px;
}
#nav {
	height:60px;
	background:#3d313f;
	position:fixed;
	z-index:100000;
	/* 必须设置最高层 */top:0px;
	width:100%;
}
#header {
	height:460px;
}
#content {
	width:1200px;
	height:1300px;
	margin:0 auto;
}
#footer {
	height:200px;
	background:#1D1D1D;
}

↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.5.2
 立即下载

纯css3下拉导航(原创)

送给如同一年多前的我,什么都好奇的刚入门的人。 

(这个是我大概九个月前写的,今天在文件夹发现了,当时觉得那些jQuery封装的导航很是神奇又不会改,老是喊:师兄过来看一看啊?!后面,好奇的、什么都想写的我,写了这个纯css的下拉导航)由于是纯css没有js封装,所以改动都再style里面栏目个数自己通过调节总宽度或每个 .li 的宽度下边是改变下拉单个子栏目的个数

/*就是当鼠标悬浮在li 上面的时候,让他子元素中的 nav3 显示可见*/
 .nav2 .li:hover .nav3 {
	height:180px;
}
.nav2 .li:nth-child(3):hover .nav3 {
	height:240px;
}
0