html实现二级菜单代码示例

涛哥
Html代码

以下是一个基本的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监听菜单项的单击事件，当菜单项被单击时，它的子菜单将被显示或隐藏。

猜你喜欢：

html代码怎么做加减功能框

html图片轮播代码怎么写

php实现图片全屏功能代码示例

 
  • html代码
  • html图片轮播
  • 单击事件
  • 二级菜单