CSS Überlauf versteckt und absolute Position

Question

folgende einfache Menü Markup Betrachten (automatisch generiert, und ich habe nicht viel Kontrolle über sie):

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

In dem obigen Code, wird das Menü hat eine feste Breite, aber es hat mehr Elemente, als in diese Breite passen, so dass der Rest der Elemente in der zweiten Zeile angezeigt wird. Ich möchte nur die Elemente anzeigen, die in die erste Zeile passen und den Rest ausblenden möchten.

Zu diesem Zweck möchte ich die Höhe für das Menü angeben. Ich bin mit diesem CSS für das Menü:

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

Problem ist, dass die oben CSS versteckt die .submenu Einzelteile auch. Bitte sehen Sie sich die Demo an, um das Problem zu verstehen.

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

Answer 1

Für den ersten Teil Ihres Problems könnten Sie white-space: nowrap auf dem Menü und display: inline-block auf seinen unmittelbaren Kindern verwenden. Dies zwingt alle Menüpunkte in einer Zeile und sie reichen über den rechten Rand des Fensters hinaus.

Dies wird jedoch eine horizontale Bildlaufleiste erzwingen. Abhängig von Ihrer Situation können Sie overflow-x: hidden auf dem Element hinzufügen, das das Menü enthält. Dieses Element muss anderen Inhalt haben, damit es größer ist als das höchste Untermenü.

#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

Wenn Sie in der Lage sind, eine Klasse, um die Elemente hinzuzufügen, die Sie auf schweben (die zweite Zeile) ausblenden möchten, versuchen Sie so etwas wie dieses:

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

Im Folgenden können Sie es ohne JQuery tun. Entfernen Sie position:relative von li. Und entfernen Sie left, top von submenu und verwenden Sie negative margin wird Trick machen.

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

prüft Fiddle Here.

Hinweis: nicht zuverlässig, aber guter Problem zu lösen.

Answer 4

können Sie dies mit Hilfe von $(this).position(); jQuery erreichen

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

und entfernen Sie die position relative von li

Working File