jquery普通菜单

最新推荐文章于 2023-04-10 08:54:32 发布

cdcdhj

最新推荐文章于 2023-04-10 08:54:32 发布

阅读量122

点赞数

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

本文链接：https://blog.youkuaiyun.com/cdcdhj/article/details/121294553

版权

jquery 专栏收录该内容

10 篇文章

订阅专栏

<!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").mouseenter(function(){
				$(".submenu").stop(false,true).hide();
				var submenu=$(this).parent().next();
				submenu.css({
					position:'absolute',
					top:$(this).offset().top+$(this).height()+10+"px",
					left:$(this).offset().left-8+"px",
					zIndex:1000,
					backgroundColor:"orange",
					width:"60px"
				});
				submenu.stop().slideDown(400);
				submenu.mouseleave(function(){
					$(this).slideUp(400);
				});
			});
		});
		</script>
		<style type="text/css">
		#menudiv{
			width: 300px;
			height: 35px;
			background-color: indianred;
			margin: 0 auto;
			
		}
		#menudiv ul{
			list-style: none;
			float: left;
			padding: 0px;
			margin: 5px 10px;
		}
			.mainmenu{
				width: 150px;
				text-align: center;
				padding: 0px;
				line-height: 20px;
				margin: 0;
				text-decoration: none;
				color: white;
			}
			.submenu{
				width: 60px;
				text-align: center;
				height: auto;
				display: none;
				
				
			}
			.submenu a{
				text-decoration: none;
				color: white;
				font-size:14px;
				display: inline-block;
				padding:4px;
			}
			.submenu a:visited{
				text-decoration: none;
				color: white;
			}
			.submenu a:hover{
				color:orange;
				background-color: white;
			}
		</style>
	</head>
	<body>
		<center>
		<div id="menudiv">
			<ul>
				<li><a href="#" class="mainmenu">菜单一</a></li>
				<li class="submenu">
					<a href="#">子菜单1</a><br/>
					<a href="#">子菜单2</a><br/>
					<a href="#">子菜单3</a><br/>
					<a href="#">子菜单4</a><br/>
					<a href="#">子菜单5</a><br/>
				</li>
			</ul>
			<ul>
				<li><a href="#" class="mainmenu">菜单二</a></li>
				<li class="submenu">
					<a href="#">子菜单1</a><br/>
					<a href="#">子菜单2</a><br/>
					<a href="#">子菜单3</a><br/>
					<a href="#">子菜单4</a><br/>
					<a href="#">子菜单5</a><br/>
				</li>
			</ul>
		</div>
		</center>
	</body>
</html>