0

我有一个这样的菜单：

<ul class="menu">
  <li>item 1</li>
  <li>item 2</li>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul> 
  <li>item 3</li>
    <ul>
      <li>item-only-child</li>
    </ul>
  <li>item 4</li>
</ul>

二级菜单（项目）应该水平显示，所以我制定了一个规则

.menu li ul { width: 400px }

和

.menu li li {width: 200px }

，第一个/更宽的一个，充当包装器。问题是，当第二级只有 1 个子级时，包装器仍然存在，因此它创建了一个空白空间，因为 li 只占据了包装器的一半。

我试过了

.menu li ul li:only-child,

但这并没有解决它，因为如果只有一个 li，我需要更改 .menu li ul。

我在想这样的事情：

**if** .menu li ul li:only-child {
  menu li ul {width: 200px}
}

当然它不起作用，只是试图理解这一点。

我应该怎么办？

提前致谢

编辑：将“菜单”更改为“ul class="menu"。

4

2 回答 2

0

谢谢各位大侠的回复，感激不尽。对不起，关于菜单/ ul 类菜单的混乱，我想把点引向原始问题，如果二级菜单只有 1 个子级/一个，我必须更改二级菜单的容器宽度李。

无论如何，我已经使用 jQuery 解决了它。它适用于 WordPress，因此可以编写 walker 类或 javascript。

这是代码（以防万一有人遇到同样的问题）

jQuery(".menu li ul li:only-child").closest('.menu li ul').css('width','200px');

因此，找到一个只有一个子级（一个 li）的二级菜单，转到最近的选择器（我猜 parent() 也是可能的）然后设置宽度。

基于 lukeocom 的小提琴

于 2013-06-18T14:55:59.203 回答
0

在您的 CSS 中，您将“ .menu ”定义为一个类而不是选择器：
应该是：menu li li { width: 200px; } // 没有要点

如果您想使用现有的 CSS 代码和类示例，HTML 应该是：

 <ul class="menu">
  <li>item 1</li>
  <li>item 2
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul> 
    </li>
  <li>item 3</li>
    <ul>
      <li>item-only-child</li>
    </ul>
  <li>item 4</li>
 </ul>
于 2013-06-18T09:47:22.150 回答