Wie Überlauf-y arbeiten unabhängig von Überlauf-x

Question

Ich arbeite an einigen CSS für eine Navigationsleiste, und ich muss ein max-height und overflow-y: scroll für das Dropdown verwenden, um sicherzustellen, dass es auf der Seite passt . Wenn ich jedoch die Eigenschaft overflow-y auf Scrollen einstelle, scheint es automatisch zu erzwingen, dass overflow-x auch auf scroll gesetzt werden muss, und als Ergebnis werden Untermenüs ausgeblendet.

Siehe jsfiddle unten für ein funktionierendes Beispiel

https://jsfiddle.net/5eyveyfz/

EDIT: Ich sollte die Verwendung meiner Geige klären. Das Problem tritt auf, wenn Sie den Mauszeiger auf den Menüpunkt "SubMenu 1" bewegen, der das betreffende Untermenü anzeigt. Das erwartete Verhalten ist, dass dieses Untermenü ohne Scrollbalken sichtbar ist, sondern seine verhalte als ob overflow-x wurden auf scroll

Answer 1

diese Werte ändern, wird das Drop-down direkt unter dem Untermenü Überschrift zeigen:

#menu > ul { 
overflow-y:scroll; 
overflow-x:hidden; 
max-height:300px; 
} 

.submenu { 
position:relative; 
display: none; 
left:0; 
top:0; 
} 

Wenn Sie die linke Position halten möchten, müssen Sie den Behälter breiter machen oder es zu Anzeige ändern: inline-block; ohne eine Breite einzustellen, um sich an die Größe des Inhalts anzupassen.

Answer 2

Während es in Ihrer Geige dies nicht zu tun - ist es möglich, die Daten, die Sie in Ihrer aktuellen Build bevöl zwingt den Tisch, seine Breite überzulaufen?

Wenn ja, ändern Sie den Container in overflow-x: hidden; um die horizontale Bildlaufleiste zu verhindern.