CSS溢出隐藏和绝对位置

Question

考虑使用简单的菜单标记（自动生成，我对它没有多少控制权）：

for

.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;
}

在上面的代码中，菜单有一个固定的宽度，但是它有更多的项目可以容纳在那个宽度，所以其余的项目将在第二行。我想只显示可以放在第一行的项目，并希望隐藏其余的项目。

为此，我想指定菜单的高度。我正在使用这个CSS作为菜单：

<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 */ } 项。请参阅演示以了解问题。

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

Answer 1

以下方法可以在不需要JQuery的情况下完成。从position:relative移除li。从left移除top，submenu，使用否定margin即可制作技巧。

＆＃13;

＆＃13;

.menu {
    width: 500px;
    height: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
     overflow: hidden  /* problem */
}

li {
    float: left;    
    margin-right: 30px;
}

ul li .submenu {
    position: absolute;
    display: none;
   list-style: none;
    width: 100px;
    margin-left: -40px;
}

ul li:hover .submenu {
    display: block;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

检查Fiddle Here.

注意：不可靠但很好解决问题。

Answer 2

对于问题的第一部分，您可以在菜单上使用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>

Answer 3

你可以借助jQuery $(this).position();

来实现这一目标

$('li').hover(function(){
        var li = $(this).position();
        $(this).children('ul').css({
            left: li.left,
            top : li.top+20
        }).fadeToggle();
});

并从li

中删除position relative

<强> Working File

Answer 4

如果您能够在悬停时隐藏的项目（第二行）添加一个类，请尝试以下操作：

......
<li class="sec">Aliquam elit nisi</li>
<li class="sec">pharetra quis</li>
<li class="sec">nulla eget</li>
......

CSS

ul li:hover ~ li.sc {
    display: none;
}