你可以使用HTML和CSS来创建JavaScript左侧导航的二级菜单。下面是一个简单的示例:
HTML代码:
<div class="sidebar">
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li><a href="#">菜单3</a></li>
</ul>
</div>
CSS代码:
.sidebar ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.sidebar li {
position: relative;
}
.sidebar li a {
display: block;
padding: 10px;
}
.sidebar ul ul {
display: none;
position: absolute;
left: 100%;
top: -10px; /* 调整子菜单的位置 */
}
.sidebar li:hover > ul {
display: inherit;
}
这段代码创建了一个带有二级菜单的左侧导航。当鼠标悬停在包含子菜单的父级菜单上时,子菜单会显示出来。
你可以根据自己的需要进行样式调整和功能扩展。
内容由零声教学AI助手提供,问题来源于学员提问




