动态二级菜单在网页设计中常常使用。HTML语言中可以通过JavaScript等脚本语言实现这一动态效果。以下是一个HTML动态二级菜单的示例代码：
<html>
<head>
<title>动态二级菜单</title>
<script type="text/javascript">
function showMenus(item) {
var subItems = item.parentNode.getElementsByTagName("ul");
for (var i = 0; i < subItems.length; i++) {
if (subItems[i].style.display == "none") {
subItems[i].style.display = "block";
} else {
subItems[i].style.display = "none";
}
}
}
</script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #eee;
}
li {
display: inline-block;
width: 100px;
text-align: center;
position: relative;
}
li:hover {
background-color: #ccc;
}
ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
</style>
</head>
<body>
<ul>
<li onclick="showMenus(this);">Menu 1
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
<li onclick="showMenus(this);">Menu 2
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</body>
</html>
在代码中，ul标签表示菜单的列表，li标签表示每一个菜单项。使用JavaScript语言实现了showMenus()函数，在每一个菜单项li上添加onclick事件，触发下拉菜单的显示和隐藏。同时，使用CSS样式控制了菜单的外观和布局。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
