如果要实现在多级下拉菜单中选择ul,你可以使用JS来实现。下面是一个示例代码:
HTML:
CSS:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.dropdown:hover .dropdown-content {
display: block;
}
.sub-menu {
display: none;
position: absolute;
top: 0;
left: 100%;
min-width: 160px;
z-index: 1;
}
.dropdown-content li.dropdown:hover .sub-menu {
display: block;
}
JavaScript:
document.addEventListener("DOMContentLoaded", function() {
var dropdowns = document.getElementsByClassName("dropdown");
for (var i = 0; i < dropdowns.length; i++) {
dropdowns[i].addEventListener("click", function() {
var subMenu = this.getElementsByClassName("sub-menu")[0];
if (subMenu) {
subMenu.style.display = (subMenu.style.display === "block") ? "none" : "block";
}
});
}
});
在这个示例中,我们使用了JavaScript来监听每个下拉菜单的点击事件,并根据是否存在子菜单来控制其显示或隐藏。