不需要的 space 和手风琴菜单中的箭头

Question

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

边框和菜单之间有不需要的 space。它适用于所有 li 元素，即也适用于菜单和子菜单项。
并且在具有以下代码后也显示子菜单的箭头

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

我正在尝试为具有子菜单的菜单添加箭头图像。例如项目 1 有子菜单，因此 项目 1 应该有箭头而不是其子菜单项目。而且如果我有 子项 1 a of Item 1，子菜单如下：

  <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>

然后 项目 1 和 子项目 1 a 将有箭头等

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

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

Answer 1

将#menunav、ul设置为li填充为0

#menunav, #menunav ul {
    padding: 0;
}

或者只是重置填充：

* {
    padding: 0
}

Demo

更新

如果要删除子菜单箭头，请执行以下操作：

示例：

#menunav li ul li a:before {
    background: none;
}

更新演示：http://jsfiddle.net/jpcb7w5y/10/

Answer 2

试试这个。

CSS:

#menunav {
    padding: 0px;
}

#menunav li ul {
    padding: 0px;
}

我认为您的 <ul> 有自己的填充。希望这有帮助。

已编辑：

DEMO

我希望箭头只出现在有子菜单的主菜单上，我有这个快速解决方案。为什么不尝试在主菜单的 <a> 上添加一些 class。希望这有效。

而不是：

#menunav li a:before {
    content: "";
    display: block;
    background: url("http://transparency.perkinswill.com/content/images/right-arrow.png") no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
}

为什么不呢：

#menunav .main:before {
    content: "";
    display: block;
    background: url("http://transparency.perkinswill.com/content/images/right-arrow.png") no-repeat;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
}

Answer 3

CSS

#menunav{padding:0}

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

不需要的 space 和手风琴菜单中的箭头

Unwanted space and arrow in accordion menu

html

javascript

css

jquery

menu