菜单栏
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.menu {
cursor: pointer;
}
</style>
<script>
function dian(thisa) {
nextNode = thisa.nextElementSibling;
if (nextNode.style.display == 'none') {
nextNode.style.display = 'block';
} else {
nextNode.style.display = 'none';
}
}
</script>
</head>
<body>
<ul>
<li class='menu' onclick='dian(this)'>导航一</li>
<li style='display:none;'>
<a href='JavaScript:void();'>菜单1</a><br/>
<a href='JavaScript:void();'>菜单2</a><br/>
<a href='JavaScript:void();'>菜单3</a><br/>
<a href='JavaScript:void();'>菜单4</a><br/>
<a href='JavaScript:void();'>菜单5</a><br/>
</li>
<li class='menu' onclick='dian(this)'>导航二</li>
<li style='display:none;'>
<a href='JavaScript:void();'>菜单6</a><br/>
<a href='JavaScript:void();'>菜单7</a><br/>
<a href='JavaScript:void();'>菜单8</a><br/>
<a href='JavaScript:void();'>菜单9</a><br/>
<a href='JavaScript:void();'>菜单10</a><br/>
</li>
<li class='menu' onclick='dian(this)'>导航三</li>
<li style='display:none;'>
<a href='JavaScript:void();'>菜单11</a><br/>
<a href='JavaScript:void();'>菜单12</a><br/>
<a href='JavaScript:void();'>菜单13<a><br/>
<a href='JavaScript:void();'>菜单14</a><br/>
<a href='JavaScript:void();'>菜单15</a>
</li>
</ul>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c25ef39ddce96809f9895d24845a6ae5.png#pic_center)