web前端开发之二级菜单的隐藏和展开_在web中隐藏二级菜单代码-优快云博客

本文介绍了一个使用纯HTML和CSS创建的导航菜单，并通过简单的JavaScript实现了下拉子菜单的交互效果。该菜单具备良好的视觉风格及用户体验，适用于网站的导航栏设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>caidan</title>
	<style>
		#navigation{
			width: 200px;
			height: 1000px;
			float: left;

		}
		#navigation>ul{
			list-style-type: none;
			margin: 0px;
			padding: 0px;

		}
		#navigation>ul>li{
			border-bottom: 5px soild #ED9F9F;
		}
		#navigation>ul>li>a{
			display: block;
			padding: 5px 5px 5px 0.5em;
			text-decoration: none;
			border-left: 12px soild #711515;
			border-left: 1px soild #711515;
		}
		#navigation>ul>li>a:link,#navigation>ul>li>a:visited{
			background-color: #c11136;
			color: #FFFFFF;

		}
		#navigation >ul>li>a:hover{
			background-color: #990020;
			color: #ffff00;
		}
		#navigation ul li ul{
			list-style-type: none;
			margin: 0px;
			padding: 0px 0px 0px 0px;

		}
		#navigation ul li ul li{
			border-top: 1px solid #ED9F9F;
		}
		#navigation ul li ul li a{
			display: block;
			padding: 3px 3px 3px 0.5em;
			text-decoration:none;
			border-left: 28px solid #a71f1f;
			border-right:1px solid #711515;
		}
		#navigation ul li a:link,#navigation ul li li a:visited{
			background-color: #e85070;
			color: #FFFFFF;
		}
		#navigation ul li ul li a:hover{
			background-color: #c2425d;
			color: #ffff00;
		}
		#navigation ul li ul.myHide{
			display: none;
		}
		#navigation ul li ul.myShow{
			display: block;
		}
	</style>
	<script>
		window.onload=function(){
			var oUl = document.getElementById("listUL");
			var aLi = oUl.childNodes;//获取所有子元素返回一个子元素节点集合包括#text节点，在DOM中，文本也是一个节点，类型为DOM Text，包含进去了每个li节点前面的文本节点"回车 "，即一个回车后面跟很多空格
			var oA;
			for(var i = 0;i<aLi.length;i++){

				if (aLi[i].tagName=="LI"&&aLi[i].getElementsByTagName("ul").length) {//找到同时满足标签名为li和返回带有ul标签名的对象的长度不为空的li节点
					oA = aLi[i].firstChild;//获得a标签
					oA.onclick = change;//给a标签绑定事件
				}
			}
		}
		function change(){
			var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];//找到
			if (oSecondDiv.className=="myHide") {
				oSecondDiv.className="myShow";
			}else{
				oSecondDiv.className="myHide";
			}
		}
	</script>
</head>
<body>
	<div id="navigation">
		<ul id="listUL">
			<li><a href="#">Home</a></li>
			<li><a href="#">News</a>
			<ul class="myHide">
				<li><a href="#">Lastest News</a></li>
					<li><a href="#">All News</a></li>
				</ul>
			</li>
			<li><a href="#">Sports</a>
			<ul class="myHide">
				<li><a href="#">Basketball</a></li>
					<li><a href="#">Football</a></li>
						<li><a href="#">Volleyball</a></li>
				</ul>
			</li>
			<li><a href="#">Weather</a>
			<ul class="myHide">
				<li><a href="#">Today's Weather</a></li>
					<li><a href="#">Forecast</a></li>
				
				</ul>
			</li>
			<li><a href="#">Contact Me</a></li>
		</ul>
	</div>
</body>
</html>