javascript - Accordion 菜单中不需要的空格和箭头

Question

我正在创建一个垂直 Accordion 菜单。 Here是我到目前为止所做的代码。我面临两个问题。

1. 边框和菜单之间有不需要的空间。它适用于所有 li 元素，即也适用于菜单和子菜单项。

2. 在有以下代码后，子菜单也显示箭头

#menunav li > a:only-child:before { content: '';}

我试图为具有子菜单的菜单放置箭头图像。例如Item 1 有子菜单，所以 Item 1 应该有箭头而不是它的子菜单项。而且，如果我有 Item 1 的 Sub-Item 1 a，子菜单如下所示:

  <li><a href="#">Item 1</a>
    <ul>
      <li><a href="#">Sub-Item 1 a</a>
        <ul>
      <li><a href="#">Sub-Item 1 aa</a></li>
      <li><a href="#">Sub-Item 1 bb</a></li>
      <li><a href="#">Sub-Item 1 cc</a></li>
    </ul>
        </li>
      <li><a href="#">Sub-Item 1 b</a></li>
      <li><a href="#">Sub-Item 1 c</a></li>
    </ul>
  </li>

然后 Item 1 和 Sub-Item 1 a 会有箭头等。

我无法删除该空间并为具有子菜单的菜单放置箭头。

有人可以建议我应该在 jquery 和 css 中更改什么，以便我可以正常工作吗？

Answer 1

CSS

#menunav{padding:0}

因为我们需要清除ul元素的默认样式