Question

我有一个这样的菜单：

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

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

我试过

.menu li ul li:only-child,

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

我在想这样的事情：

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

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

我该怎么办？

提前致谢

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

Answer 1

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

Answer 2

感谢回复人员，我很感激。抱歉有关菜单/ ul类菜单的混淆，我正在考虑将问题归结为原始问题，如果第二级菜单只有1个孩子/一个，我必须更改第二级菜单的容器宽度李。

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

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

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

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

Fiddle基于lukeocom的

（CSS）只有一个孩子的二级水平菜单

2 个答案: