jquery編寫導航欄

第一：html頁面

                        <div id="navigation">
				<ul>
					<li><a href="#">首頁</a></li>
					<li>
						<a href="#">襯衫</a>
						<ul>
							<li><a href="#">短袖襯衫</a></li>
							<li><a href="#">長袖襯衫</a></li>
							<li><a href="#">無袖襯衫</a></li>
						</ul>
					</li>
					<li>
						<a href="#">衛衣</a>
						<ul>
							<li><a href="">開襟衛衣</a></li>
							<li><a href="">套頭衛衣</a></li>
						</ul>
					</li>
					<li><a href="#">褲子</a>
						<ul>
							<li><a href="#">休閒褲</a></li>
							<li><a href="#">卡其褲</a></li>
							<li><a href="#">牛仔褲</a></li>
							<li><a href="#">短褲</a></li>
						</ul>
					</li>
					<li><a href="#">聯繫我們</a></li>
				</ul>
			</div>

鼠標一經過導航分類，就會彈出每個分類中的小類

第二：css樣式文件

#navigation{
	width:1180px;
	padding:8px;
	margin:5px auto;
	background:#3b5998;
	height:16px;
	font-size:14px;
}
#navigation ul{
	margin-top: 0;
}
#navigation ul li{
	float:left;
	margin-right:14px;
	position:relative;
	z-index: 100;
}
#navigation ul li a{
	padding:0 8px;
	font-weight:700;
	color:#FFFFFF;
	text-decoration: none;
}
#navigation ul li ul{
	background:#88c366;
	position:absolute;
	overflow:hidden;
	display:none;
	padding-left:0;
}
#navigation ul li:hover ul{
	background:#88c366;
	position:absolute;
	width:100px;
	display:block;
	padding-left:0;
}
#navigation ul li ul li{
	border-bottom: 1px solid #bbb;
	text-align:left;
	width:100%;
}
#navigation ul li ul li:hover{
	background:#3b5998;
}

這樣大概的效果就出來了，不用用到js文件