jquery编写导航栏

最新推荐文章于 2023-07-02 21:55:07 发布

不吃鱼的猫_0305

最新推荐文章于 2023-07-02 21:55:07 发布

阅读量547

点赞数

分类专栏： jquery css 文章标签： css html 导航 DOCTYPE jquery

本文链接：https://blog.csdn.net/Linda_ke/article/details/51516719

版权

jquery 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

第一：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文件