Javascript 单击时格式化隐藏嵌套列表时出现问题

我试图构建一个嵌套列表，当单击顶层“li”时，它会下拉并显示嵌套列表。我在网上找到了一些例子来说明如何做到这一点（），并且在大多数情况下，我可以让js的主要功能正常工作

我的问题是，当我点击第一个“li”时，我的顶级列表项被分成4列。它将我的嵌套列表直接放在这个“li”下，将它下面的第二行推到右边，并且没有跨越4列。嵌套列表在这个单一点中混乱不堪

以下是一张图片，旨在更好地解释：

第1项第2项第3项第4项 -分项1-分项2-分项3-分项4
项目5项目6项目7项目8

因此，当我单击项目1时，我希望嵌套的子项目显示如上所示。现在是这样的,

第1项第2项第3项第4项 -分项1
-分项2
-分项3

代码如下：

<ul class="promos">
<li class="expanded"><a href="#"><img src="{{skin url="images/category-button.png"}}" alt="" /></a>
  <ul class="sub-cat">
    <li.sub-cat"><a href="foo">Sub Item 1</a></li>
    <li.sub-cat"><a href="foo">Sub Item 2</a></li>
    <li.sub-cat"><a href="foo">Sub Item 3</a></li>
    <li.sub-cat"><a href="foo">Sub Item 4</a></li>
  </ul>
</li>
<li class="expanded"><img src="{{skin url="images/category-button.png"}}" alt="" /></li>
<li class="expanded"><img src="{{skin url="images/category-button.png"}}" alt="" /></li>
<li class="expanded"><img src="{{skin url="images/category-button.png"}}" alt="" /></li>
<li class="expanded"><img src="{{skin url="images/category-button.png"}}" alt="" /></li>
<li class="expanded"><img src="{{skin url="images/category-button.png"}}" alt="" /></li>
</ul>

CSS定义的.sub cat与.promos完全相同，但需要使用不同的类名，以便在单击之前隐藏它，但我需要在文本大小、颜色等方面使用相同的属性

---

谢谢

我想这只是以下打字错误的原因：

<ul class="sub-cat">
   <li.sub-cat"><a href="foo">Sub Item 1</a></li>
   ...

请快速尝试：。子类{display:inline block；}似乎没有帮助。嵌套列表仍保留在父列表的容器中。谢谢，这是打字错误吗@Marcelo刚刚在你发布第二条评论的同时发布了我关于打字错误的回答，对此表示抱歉。我建议如果这解决了Rons的问题，你只需将你的两条评论作为答案发布，Ron就会接受你的评论。我也不确定这个符号是什么。在示例（li.leaf）中，我认为leaf是一个没有显示的类，它包含样式属性或其他内容。我删除了它并添加了内联块。我的子类别不再杂乱无章，但它们仍然“卡在”顶级列表中。例如，假设有4个顶级“li”每个都有自己的子类别，但子类别仅显示在包含“li”的列表中，而不跨越其他列表项的下方。@Ron您在寻找类似的内容吗？刚刚调整了叶小提琴：是的，但我的子列表项只扩展到父列表项。根据，我可以设置一个固定的宽度。sub cat和我的“li”向右展开，但现在的问题是其他顶级列表项没有向下推，它们位于子项的顶部。@Ron不确定我是否理解它应该是什么样子，所以我只调整了第一个小提琴（带有一些虚拟图像）并且提到的叶子提琴代码——并不是完全有效的导航（因为当再次单击父导航时，引用的叶子提琴也不会关闭子导航）。
<ul class="sub-cat">
   <li.sub-cat"><a href="foo">Sub Item 1</a></li>
   ...

<ul class="sub-cat">
    <li><a href="foo">Sub Item 1</a></li>
     ...