jquery下拉联级菜单

最新推荐文章于 2022-03-30 17:04:42 发布

cdcdhj

最新推荐文章于 2022-03-30 17:04:42 发布

阅读量208

点赞数

分类专栏： jquery 文章标签： jquery css

本文链接：https://blog.csdn.net/cdcdhj/article/details/121279046

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
		<script>
		$(function(){
			$("#mainmenu ul").css({display:"none"});
			$("#mainmenu li").hover(function(){
				$(this).find('ul:first').css({visibility:"visible"}).show(400);
			},function(){
				$(this).find("ul:first").css({visibility:"hidden"});
			})
		});
		</script>
		<style type="text/css">
			#mainmenu{
				list-style: none;
				width: 350px;
				height: 60px;
				background-color: green;
				padding: 0px;
				text-align: left;
				line-height: 55px;
			}
			#mainmenu li{
				float: left;
				margin-left: 15px;
				padding: 0px;
				font-size: 18px;
			}
			#mainmenu li a:link{
				color: white;
				text-decoration: none;
			}
			#mainmenu li ul{
				list-style: none;
				width: 100px;
				text-align: left;
				position: relative;
				left: -50px;
				top:5px;
			}
			#mainmenu li ul li{
				font-size:14px;
				width: 150px;
				height: auto;
				background-color: #ccc;
			}
			#mainmenu ul li ul li{
				width: 130px;
			}
		</style>
	</head>
	<body>
		<center>
		<div id="iamgecss">
			<ul id="mainmenu">
				<li><a href="#">1 HTML</a></li>
				<li><a href="#">2 CSS</a></li>
				<li><a href="#">3 Javascript</a>
					<ul class="submenu">
						<li><a href="#">3.1 JQUERY</a>
							<ul>
								<li><a href="#">3.1.1 Download</a></li>
								<li><a href="#">3.1.2 Tutorial</a></li>
							</ul>
						</li>
						<li><a href="#">3.2 Mootools</a></li>
						<li><a href="#">3.3 Prototype</a></li>
					</ul>
				</li>
			</ul>
		</div>
		</center>
	</body>
</html>

cdcdhj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery下拉联级菜单

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <script> $(function(){ $("#mainmenu ul").
复制链接

扫一扫