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>

Answer 2

如果你能够添加一个类你想隐藏悬停（第二行）的项目，尝试这样的事情：

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

Answer 3

以下方法可以在不需要JQuery的情况下执行。从li删除position:relative。并从submenu中删除left,top并使用负号margin将会制造诡计。

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

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

检查Fiddle Here.

注：不可靠的，但良好的解决问题。

Answer 4

你可以使用jQuery $(this).position();

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

的帮助实现这一点，从李

Working File

删除