使用JavaScript创建二级导航菜单-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_38269675/article/details/88887574

本文介绍了如何使用JavaScript实现二级导航菜单，通过代码展示具体实现步骤，帮助读者理解动态创建和操作DOM元素的方法。

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

贴下效果图：
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 导航栏 -->
	<style>
	.page{
		width: 960px;
		height: 460px;
		margin: 20px auto;
		position: relative;
	}
	.bg{
		width: 240px;
		height: 460px;
		background: rgba(7, 17, 27, 0.4);
		opacity: 0.5;
		position: absolute;
		top: 0;
		left: 0;
	}	
	
	.main{
		width: 240px;
		height: 460px;
		position:absolute;
		top: 0;
		left: 0;
	}
	a{
		text-decoration: none;
	}
	.nav{
		width: 240px;
		height: 80px;
		margin-top: 20px;
		line-height: 80px;
	}
	.nav span{
		margin-left: 32px;
		color: white;
		font-size: 19px;
	}
	.line{
		width:190px;
		border-bottom: 1px solid rgba(7,17,27,0.3);
		margin: 0 auto;
	}
	.sub{
		width: 720px;
		height: 460px;
		position: absolute;
		left: 240px;
		top: 0;
		display: none; 
	}
	.sub-menu{
		width: 720px;
		height: 460px;
		/* margin-top: -20px; */
		/* display: none; */
		background-color: red;
		overflow: hidden;
		
	}
	.inner-box{
		/* margin-top: -20px;*/
		overflow: hidden;
		width: 720px;
		height: 460px;
		background-color: black;
		background-image: url('img/bg.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size:100% 100%;
	/* 	background-attachment: fixed; */
	}
	.row{
	    margin: 20px 10px 10px 30px;

	}
	.row a{
		 color: rgba(7, 17, 27, 0.6);
		 font-size: 18px;
	}
	</style>
</head>
<body>
	<div class="page" id="page">
		<!-- 菜单背景色 -->
		<div class="bg"&

js实现二级导航