如何创建比标题更宽的下拉菜单？

这里是我的菜单的基本结构。我无法改变这一点。如何创建比标题更宽的下拉菜单？

<ul> 
    <li><span>Bedroom</span></li> 
    <li><span>Kitchen</span> 
     <ul> 
      <li><span>Pot</span></li> 
      <li><span>Panholder</span></li> 
     </ul> 
    </li> 
    <li><span>Garden</span></li> 
</ul>

这是我想达到的布局：

 
Bedroom | Kitchen | Garden 
     | Pot  | 
     | Panholder |

正如你可以看到Panholder比厨房更广泛。如何从其子菜单的宽度中断开厨房的宽度？（子菜单可以重叠，我会隐藏所有的子菜单，但目前的一个。

我在寻找一个非JavaScript的解决方案。如果你想尝试一下，I've put it on jsFiddle。

来源

2010-08-12 Georg Schölly

您是否尝试添加一个包含固定宽度的ul li ul li的css类？ – Orbit 2010-08-12 14:28:28

@Brandon：刚刚尝试过。它的工作原理*，但*我不能以这种方式添加任何背景颜色。 – 2010-08-12 14:43:00

将position: absolute添加到您的下拉菜单<ul>。在你的jsFiddle，它将是以下内容：

body > ul > li > ul { 
    position: absolute; 
}

来源

2010-08-12 15:22:07

确保你在这个地方添加了'width：auto'。 – preahkumpii 2014-05-15 13:22:23

较大的宽度Specifiy到嵌套UL或立项目，如：

ul { width: 100px; } 
ul li ul { width: 200px; }

这应该使嵌套UL大于它的父

在全下拉CSS方面有很多可用的解决方案给你一个开始的好地方是www.cssplay.co.uk

来源

2010-08-12 14:28:20 simnom

不适用于我，因为我不知道菜单项的宽度。 – 2010-08-12 14:42:06

如何创建比标题更宽的下拉菜单？

回答

相关问题