Question

我有一个导航栏，其中包含一个用于打开下拉列表的链接的文本字符串。此链接的父级有overflow: hidden，允许我截断字符串，因为它太长了。但是，我希望下拉列表绝对位于下方并居中，而不管父级的宽度如何。由于我使用overflow: hidden，因此下拉列表会被截止。我想保留下拉列表的定位以及overflow属性。

这是否有CSS修复？我知道我无法忽略父级overflow属性，但我宁愿不使用position: fixed并尽可能使用JavaScript操作边距。

我做了一个简单的小提琴here

提前致谢！

Answer 1

不幸的是，在CSS中没有办法让孩子出现溢出：隐藏元素在父边框之外显示其内容，你必须改变层次结构。

如果无法做到这一点，您可以在底部添加填充.nav-pull-left，这是您的下拉列表的大小，虽然这是一个垃圾解决方案..

.nav_pull_left {
  width:auto;
  height:50px;
  padding-bottom: 80px;
  overflow:hidden;
  float: none;
  border: 1px solid black;
  white-space: nowrap;
}

您还可以使用JavaScript在下拉列表显示时动态更新父容器的高度，但再次重新排序层次结构是最好和最干净的。

如果这是您想要的方式，请告诉我，我可以提供帮助：）

Answer 2

我可以建议以下内容，您可以按照以下步骤更改您的CSS。

.nav_pull_right {
  min-height:50px;      /* changed height to min-height */
  ...
}

.nav_pull_left {
  min-height:50px;     /* changed height to min-height */
  ...
}

.my_dropdown {
  position: relative;  /* changed absolute to relative */
  margin: 0;
  margin-left:-87px;
  /* top: 2em; */      /* removed top */
  left: 50%;
  width: 170px;
  z-index: 99999;
  border:2px solid #929292;
}

这样，您的容器溢出将被保留并被按下，下拉菜单将居中。

这可以用吗？

这是fiddle demo

下拉列在父级下方，溢出：隐藏

2 个答案: