Javascript实现简单的下拉菜单

最新推荐文章于 2024-07-04 16:45:16 发布

纵马且长歌

最新推荐文章于 2024-07-04 16:45:16 发布

阅读量1.4k

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/no2015214099/article/details/73252889

版权

Web 专栏收录该内容

18 篇文章 9 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>DaoHang_DownMenu</title>
	<meta charset="utf-8">
	<script type="text/javascript">
		function showMeYourMenu(li){                           /*Javascript写的操作函数*/
			var a=li.getElementsByTagName("ul")[0];
			a.style.display="block";
		}
		function hideYourMenu(li){
			var a=li.getElementsByTagName("ul")[0];
			a.style.display="none";
		}
	</script>
	<style type="text/css">
	*{margin: 0 auto; padding: 0px;}
		#nav{width: 600px; height: 30px; background-color: #0066CC; padding: 0px; border-radius: 2px;}
		#nav ul{    position: relative;  margin: 0px; }
		#nav ul li{float: left;}
		#nav ul li a{ text-decoration: none; display: block; width:150px;  height:30px; padding: 0px;margin:0px auto; text-align: center; line-height: 30px; color: #FFF;  font-family: Microsoft Yahei;}
		li{ list-style: none;  }
		#nav ul li a:hover{
			background-color: #0099CC;
			border-radius: 2px;
		}
		#nav ul li ul{display: none;position: absolute;background-color: #0066AA; border-radius: 2px;}
		#nav ul li ul li{float: none;}
		#nav ul li ul li a{background-color: #0077AA}
	</style>
</head>
<body>
	<div id="nav">
		<ul >
			<li><a href="#">首页</a></li>
			<li οnmοuseοver="showMeYourMenu(this)" οnmοuseοut="hideYourMenu(this)"><a href="#">第一菜单栏</a>    /*调用函数的位置需要注意*/
					<ul>
						<li><a href="#">11111</a></li>
						<li><a href="#">22222</a></li>
					</ul>
				</li>
			<li οnmοuseοver="showMeYourMenu(this)" οnmοuseοut="hideYourMenu(this)"><a href="#">第二菜单栏</a>
					<ul>
						<li>
							<a href="#">33333</a>
							<a href="#">44444</a>
						</li>
					</ul>
				</li>
			<li οnmοuseοver="showMeYourMenu(this)" οnmοuseοut="hideYourMenu(this)"><a href="#">第三菜单栏</a>
					<ul>
						<li>
							<a href="#">55555</a>
							<a href="#">66666</a>
						</li>
					</ul>
				</li>
		</ul>
	</div>
</body>
</html>

/*效果图都一样，注意与CSS实现的区别就行*/

纵马且长歌

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录