以下是一个基本的html实现二级菜单代码示例，展示如何使用无序列表（<ul>）和有序列表（<ol>）标记来创建一个二级菜单：
<!DOCTYPE html>
<html>
<head>
<title>二级菜单示例</title>
<style>
/* 样式用于隐藏子菜单 */
ul ul {
display: none;
}
</style>
</head>
<body>
<h1>主菜单</h1>
<ul>
<li>菜单项1</li>
<li>菜单项2
<ul>
<li>子菜单项1</li>
<li>子菜单项2</li>
<li>子菜单项3</li>
</ul>
</li>
<li>菜单项3</li>
<li>菜单项4
<ol>
<li>有序子菜单项1</li>
<li>有序子菜单项2</li>
<li>有序子菜单项3</li>
</ol>
</li>
</ul>
<script>
// JavaScript 用于显示和隐藏子菜单
var dropdown = document.querySelectorAll("li");
for (var i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.querySelector("ul").classList.toggle("show");
});
}
</script>
</body>
</html>
该示例使用嵌套的无序列表（<ul>）和有序列表（<ol>）标记来创建主菜单和子菜单，同时使用CSS样式隐藏了子菜单。还使用了JavaScript脚本来显示和隐藏子菜单。在每个菜单项中，都有一个嵌套的无序或有序列表，其子项将作为子菜单项显示。使用JavaScript监听菜单项的单击事件，当菜单项被单击时，它的子菜单将被显示或隐藏。
猜你喜欢：
评论