CSS przepełnienie ukryty i bezwzględne położenie

Question

Rozważmy następujący proste menu znaczników (generowane automatycznie, a ja nie mam dużo nad nim kontroli):

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

W powyższym kodzie, menu ma o stałej szerokości, ale ma więcej przedmiotów, niż może zmieścić się na tej szerokości, więc reszta elementów przejdzie do drugiej linii. Chcę wyświetlić tylko te elementy, które zmieszczą się w pierwszej linii i chcesz ukryć resztę.

W tym celu chcę określić wysokość menu. Używam tego CSS dla menu:

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

Problem że Powyższy css ukrywa .submenu rzeczy też. Zobacz wersję demonstracyjną, aby zrozumieć problem.

Demo:http://jsfiddle.net/Lgyg2a4r/

Answer 1

W pierwszej części problemu można użyć white-space: nowrap w menu i display: inline-block na swoich bezpośrednich elementach potomnych. Wymusza to wszystkie elementy menu w jednej linii i rozciągają się one poza prawą krawędź okna.

Wymusza to poziomy pasek przewijania. W zależności od sytuacji możesz dodać overflow-x: hidden do elementu zawierającego menu. Ten element musi mieć inną treść, aby był wyższy od najwyższego podmenu.

#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

Jeśli jesteś w stanie dodać klasę do elementów, które chcesz ukryć przy aktywowaniu (druga linia), spróbuj coś takiego:

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

Można to zrobić bez potrzeby używania JQuery. Usuń position:relative z li. I usuń left, top z submenu i użyj negatywu margin, aby zrobić lewę.

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

Sprawdź Fiddle Here.

Uwaga: nie są wiarygodne, ale dobre rozwiązania problemu.

Answer 4

można to osiągnąć za pomocą jQuery $(this).position();

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

i wyjąć position relative z li

Working File