html - 如何使绝对子元素根据内容调整大小，包括大于父元素？

Question

我正在创建一个下拉菜单，并希望菜单下拉菜单能够根据其内容调整大小，而菜单“标题”保持固定宽度。因此，如果下拉项的文本比父标题长，则下拉区域将大于标题，否则，下拉列表的大小将与标题一致。下拉选项中的文本不应换行我知道这可以用 javascript 实现，但可以仅使用 CSS 来完成吗？

所以我有一个包含以下 HTML 的菜单:

<div class="menu">
  <div class="menu-item">
    <div class="title">Menu Title 1</div>
  </div>
  <div class="menu-item">
    <div class="title">Menu Title 2</div>
    <div class="dropdown">
      <div class="option">Menu Option 1</div>
      <div class="option">Menu Option 2</div>
      <div class="option">Long Menu Option 3</div>
    </div>
  </div>
  <div class="menu-item">
    <div class="title">Menu Title 3</div>
  </div>
  <div class="menu-item">
    <div class="title">Menu Title 4</div>
  </div>
</div>

使用以下 CSS 设置样式:

html, body, .menu{
  margin:0;
  padding:0;
  width:400px;
}

.menu-item{
  width: calc(25% - 2px);
  float:left;
  position:relative;
}

.title{
  border: 1px solid #000
}

.dropdown{
  position:absolute;
  left:0;
  top:100%;
  background-color:#fff;
  /* width:138px; /* uncomment this for desired effect */
}

.option{
  border: 1px solid #000;
}

演示(将 width: 138px; 添加到 .dropdown 样式以查看所需效果):https://codepen.io/anon/pen/LXyKBJ

Answer 1

我问了不久就找到了解决办法!

将 white-space: nowrap; 添加到 .dropdown 元素会强制文本不换行，将 div 扩展到父级大小之外。添加 min-width: 100% 可确保下拉列表的宽度不会小于父级。

我专注于宽度和显示属性而错过了这个明显的解决方案。