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

我有这样的菜单：

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

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

及

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

我试过了

.menu li ul li:only-child, 

但它不能解决问题，因为我需要更改。菜单li ul，如果只有一个li

我是这样想的：

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

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

当然，这是行不通的，只是想让大家明白这一点

我该怎么办

提前谢谢

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

在CSS中，您将“.menu”定义为类而不是选择器：
应该是：

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

项目1
项目2

项目
项目
项目


项目3

项目独生子女

项目4

感谢各位的回复，我很感激。对于菜单/ul类菜单的混淆，我很抱歉，我想把重点转到原始问题，如果二级菜单只有一个子菜单/1个li，我必须更改二级菜单容器的宽度

无论如何，我已经用jQuery解决了这个问题。它是针对WordPress的，所以要么编写walker类，要么编写javascript

下面是代码（以防有人碰到同样的问题）

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

---

基于lukeocom的

无CSS选择器4级，您最好的选择是将一个宽度为200px的类放入手动有一个孩子的

ul

s中。我想是这样的。或者是javascript。您是否为父ul设置了高度？您所说的“第二级菜单（项）应该水平显示”是什么意思"? 还有什么空的空间被创造出来了？您的css选择器可能不正确。您没有菜单类的任何元素。因此，您只需在css中使用“菜单”。ie

菜单ul{width:400px；}

。这里有一把小提琴可以帮助你找出问题所在——嗨，我的意思是，在大多数情况下（我已经看到），通常第二级菜单垂直显示，一个在另一个之上。我所说的水平，是指彼此紧挨着，所以“项目x1”->（左）“项目x2”、->（下）“项目x3”。因此，从左到右（2个项目）然后在下面重新开始，而不是项目x1->（下面）项目x2->（下面）项目x3。这是一个打字错误，对不起，我想通过样式来说明这一点。菜单li ul和。菜单li li具有不同的宽度（容器和项目/li内）哦，是的，有一个错误。不确定这是否是OP的错别字，因为他的代码似乎适合他。对不起，这是错别字。我将修复我的第一个帖子。

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