下面的例子几乎就是我想要的。 相反，我希望子列表是水平打开的，而不是像现在这样垂直打开的。 前两个里，我想现在就把它们竖立起来。 我没有CSS的经验。
null
$('li').on('click', function(e) {
$(this).children('ul').toggle();
$(this).siblings('li').find('ul').hide();
e.stopPropagation();
}); .sub-menu {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li>Item
<ul class="sub-menu">
<!--This works fine-->
<li>Item
<ul class="nested sub-menu">
<!--Here is the problem-->
<li>Item
<ul class="nested sub-menu">
<!--Here is the problem too-->
<li>ItemX</li>
<li>ItemY</li>
</ul>
</li>
</ul>
</li>
<li>
Item2
</li>
<li>
Item3
</li>
</ul>
</li>
<li>
Item
</li>
</ul>null
将li更改为包含下拉项的div，并将该div设置为在下面悬停更新时显示为flex
忽略上面的内容，使用嵌套的li和onclick事件
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class="hover">Horizontal
<ul class="horizontal">
<li>Horizontal 1</li>
<li>Horizontal 2</li>
</ul>
</li>
<li> Item 4</li>
</ul>
CSS
.horizontal {
flex-direction: row;
width: 1500px;
height: 20px;
display: none;
}
.open {
display: flex;
}
要使其可单击，请使用onClick事件将。open添加到ul.horizonal的无类中
