html - CSS溢出隐藏和绝对位置

Question

考虑以下简单的菜单标记(自动生成，我对它没有太多控制):

.menu {
  width: 500px;
  height: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  /* overflow: hidden ... problem */
}
li {
  float: left;
  position: relative;
  margin-right: 30px;
}
ul li .submenu {
  position: absolute;
  left: 0;
  display: none;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100px;
}
ul li:hover .submenu {
  display: block;
}

<ul class="menu">
  <li>Lorem ipsum</li>
  <li>Submenu
    <ul class="submenu">
      <li>Sub item 1</li>
      <li>Sub item 2</li>
    </ul>
  </li>
  <li>consectetur</li>
  <li>adipiscing elit</li>
  <li>Aliquam elit nisi</li>
  <li>pharetra quis</li>
  <li>nulla eget</li>
</ul>

在上面的代码中，菜单有一个固定的宽度，但它的元素多于该宽度所能容纳的，所以其余的元素将放在第二行。我只想显示可以放在第一行的元素，并想隐藏其余的元素。

为此，我想指定菜单的高度。我正在将此 CSS 用于菜单:

.menu {
  width: 500px;
  height: 20px;
  overflow: hidden; /* problem */
}

问题 上面的 css 也隐藏了 .submenu 元素。请查看演示以了解问题。

演示: http://jsfiddle.net/Lgyg2a4r/

Answer 1

对于问题的第一部分，您可以在菜单上使用 white-space: nowrap 并在其直接子级上使用 display: inline-block。这会强制所有菜单项在一行上，并且它们会超出窗口的右边缘。

但是，这会强制出现水平滚动条。根据您的情况，您可以在包含菜单的元素上添加 overflow-x: hidden。该元素必须具有其他内容，以便它比最高的子菜单更高。

#wrapper {
  overflow-x: hidden;
  min-height: 400px;
}
.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  background-color: palevioletred;
}
.menu > li {
  display: inline-block;
  margin-right: 30px;
  position: relative;
}
.submenu {
  position: absolute;
  left: 0;
  top: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
  background-color: paleturquoise;
}
.menu li:hover .submenu {
  display: block;
}

<div id="wrapper">
  <ul class="menu">
    <li>Lorem ipsum</li>
    <li>Submenu
      <ul class="submenu">
        <li>Sub item 1</li>
        <li>Sub item 2</li>
      </ul>
    </li>
    <li>consectetur</li>
    <li>adipiscing elit</li>
    <li>Aliquam elit nisi</li>
    <li>pharetra quis</li>
    <li>nulla eget</li>
  </ul>
</div>