Question

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

边框和菜单之间有不需要的空间。它适用于所有li元素，即菜单和子菜单项。
在下面的代码

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

我试图将箭头图像放入具有子菜单的菜单中。例如第1项有子菜单，因此第1项应该有箭头而不是其子菜单项。如果我有子项1 第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 将有箭头等。

我无法移除那个空间并为有子菜单的菜单添加箭头。

有人可以建议我应该在jquery和css中更改哪些内容，以便我能够正常运作吗？

Answer 1

<强> CSS

#menunav{padding:0}

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

Answer 2

将#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 3

试试这个。

CSS：

#menunav {
    padding: 0px;
}

#menunav li ul {
    padding: 0px;
}

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

编辑：

DEMO

我想你的箭头只出现在带有子菜单的主菜单中，我有这个快速的解决方案。为什么不尝试在主菜单的<a>上放一些课程。希望这有效。

而不是：

#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;
}

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

3 个答案: