javascript + css 下拉菜单 2.0版

最新推荐文章于 2024-06-13 09:00:00 发布

ihelloworld

最新推荐文章于 2024-06-13 09:00:00 发布

阅读量527

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/ihelloworld/article/details/8109688

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

javascript部分原创，css部分转载

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <style type="text/css">
	* {
		padding:0;
		margin:0;
	}
	
	body {
		font-size:small;
	}
		
	#navigation {
		margin:20px;
	}

	#navigation, #navigation li ul {
		list-style-type:none;
	}

	#navigation li {
		float:left;
		text-align: center;
		position:relative;
	}
	
	#navigation li a:link, #navigation li a:visited {
		display:block;
		width:120px;
		height:40px;
		border:1px solid #FFF;
		border-width:1px 1px 0 0;
		background-color:#6699ff;
		color:#000;
		text-decoration:none;
		text-align:center;
		line-height:40px;
	}

	#navigation li a:hover {
		color:#000;
		background:#3399ff;
	}

	#navigation li ul li a:hover {
		color:#000;
		background:#3366ff;
	}

	#navigation li ul {
		display: none;
		top: 40px;
		left: 0;
		margin-top: 1px;
		width: 120px;

	}

	#navigation li ul li ul {
		display: none;
		position: absolute;
		top: 0px;
		left: 120px;
		margin-top: 0;
		margin-left: 1px;
		width: 120px;
	}

  </style>
  <script type="text/javascript">
	window.onload = function() {
		var nav = document.getElementById("navigation");
		registerEvent(nav);
	}

	function registerEvent(obj) {
		var oLiList = obj.getElementsByTagName("li");

		for (var i = 0; i < oLiList.length; ++i) {
			var oUlList = oLiList[i].getElementsByTagName("ul");
			if (oUlList.length > 0) {
				oLiList[i].onmouseover = function() {
					var oUl = this.getElementsByTagName("ul").item(0);
					oUl.style.display = "block";
				}

				oLiList[i].onmouseout = function() {
					var oUl = this.getElementsByTagName("ul").item(0);
					oUl.style.display = "none";
				}

			}
		}
	}

	</script>
 </head>
 <body>
	<ul id="navigation">
		<li>
			<a href="#">菜单一</a>
			<ul>
				<li><a href="#">菜单项11</a></li>
				<li><a href="#">菜单项12</a></li>
				<li><a href="#">菜单项13</a></li>
			</ul>
		</li>
		<li>
			<a href="#">菜单二</a>
			<ul>
				<li><a href="#">菜单项21</a></li>
				<li><a href="#">菜单项22</a></li>
				<li><a href="#">菜单项23</a></li>
			</ul>
		</li>
		<li>
			<a href="#">菜单三</a>
			<ul>
				<li><a href="#">菜单项31</a></li>
				<li><a href="#">菜单项32</a></li>
				<li><a href="#">菜单项33</a>
				<ul>
					<li>
						<a href="#">菜单项311</a>					
					</li>
					<li><a href="#">菜单项312</a></li>
					<li><a href="#">菜单项313</a>
						<ul>
							<li><a href="#">菜单项3131</a></li>
							<li><a href="#">菜单项3132</a></li>
							<li><a href="#">菜单项3133</a></li>
						</ul>
					</li>
				</ul>
				</li>
			</ul>
		</li>
	</ul>
 </body>
</html>

ihelloworld

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript + css 下拉菜单 2.0版

javascript部分原创，css部分转载 New Document * { padding:0; margin:0; } body { font-size:small; } #navigation { margin:20px; } #navigation, #navigation li ul { list-style-ty
复制链接

扫一扫