CSS允许绝对元素扩展到比父元素更宽

我在网站顶部的导航栏上有一个下拉菜单。我希望此菜单中的项目水平展开以适合其内容。出于某种原因，它们不会扩展到比它们的父代更宽的范围

我在CodePen中重新创建了此问题：

在我的实际网站中，我无法控制DOM的这一部分，所以我在这一部分有点受限

以下是代码笔不可用时我的娱乐代码：

HTML:

如果我在子菜单项（例如400px）上显式设置宽度，它们将正确展开，但由于某些原因，内容不会使它们变宽。我真的不想硬编码宽度

谢谢

---

YM

解决办法相当简单。你只要加上

ul.submenu a {
  white-space: nowrap;
}

这会阻止文本换行，因此不会粘附到父容器大小

---

你可以在这里查看

解决方案相当简单。你只要加上

ul.submenu a {
  white-space: nowrap;
}

这会阻止文本换行，因此不会粘附到父容器大小

---

您可以在这里查看它

刚刚修复了您的笔-升级您的css类：

ul.nav li ul.submenu 
{
  position: absolute;
  top: 40px !important;
  left: 0px !important;
  width:auto;
  display: none;
  background: rgb(254, 197, 4);
}

ul.nav li ul.submenu > li
{
  display:inline-block;
  white-space: nowrap;
}

---

它使用CSS 2:）刚刚修复了你的笔-升级你的CSS类：

ul.nav li ul.submenu 
{
  position: absolute;
  top: 40px !important;
  left: 0px !important;
  width:auto;
  display: none;
  background: rgb(254, 197, 4);
}

ul.nav li ul.submenu > li
{
  display:inline-block;
  white-space: nowrap;
}

---

它使用CSS 2:）尝试添加一个示例作为代码段或钢笔。你会得到更多的选票，这很容易。谢谢@天哪，收到。加了一支笔。感谢您指出这一点。请尝试添加一个示例作为片段或笔。你会得到更多的选票，这很容易。谢谢@天哪，收到。加了一支笔。谢谢你指出这一点。