Horizontaler Bildlauf mit vertikalem Überlauf in CSS

Question

Ich möchte ein Navigationsmenü am oberen Rand meiner Seite haben, das Menüelemente anzeigt, und bei Hover zeigt Untermenüelemente an, und ermöglicht horizontalen Überlauf mit einer Bildlaufleiste. Die Lösung darf kein JavaScript benötigen.

Ich kann die Drop-Downs funktioniert gut, wenn ich keinen horizontalen Überlauf habe.

Ich kann die horizontale arbeiten, um die Art, wie ich will auch bekommen.

Aber dann verliere ich den vertikalen Überlauf so dass ich nicht meine Drop Tiefen überhaupt sehen kann.

Das Menü muss nur die Höhe der anfangs sichtbaren Menüelemente sein und im Beispiel muss die Schaltfläche anklickbar sein.

Ich glaube, das Problem ist, dass overflow-x-auto erstellt einen neuen Block-Formatierungskontext Einstellung so overflow-y nicht visible und mein Überlauf wird sein kann versteckt.

Gibt es eine Möglichkeit, dass ich sowohl horizontale Scroll und vertikale Überlauf haben kann?

.menu-items--depth-0 { 
 
    /* These three give me the horizontal scroll I want, but then the drop-downs don't show */ 
 
    width: 300px; 
 
    overflow-x: auto; 
 
    overflow-y: hidden; 
 

 
    white-space: nowrap; 
 
    position: relative; 
 
    z-index: 0; 
 
} 
 

 
.menu-items { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.menu-item--depth-0 { 
 
    display: inline-block; 
 
} 
 

 
.menu-item { 
 
    position: relative; 
 
    border: 1px solid grey; 
 
    height: 30px; 
 
    background: white; 
 
} 
 

 
.menu-items--depth-1 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 200px; 
 
    opacity: 0; 
 
    pointer-events: none; 
 
    transition: 300ms; 
 
    z-index: 1; 
 
} 
 

 
.menu-item--depth-0:hover .menu-items--depth-1 { 
 
    pointer-events: all; 
 
    opacity: 1; 
 
    transform: translateY(30px); 
 
}

<ul class="menu-items menu-items--depth-0"> 
 
    <li class="menu-item menu-item--depth-0"> 
 
     Menu item one 
 
     <ul class="menu-items menu-items--depth-1"> 
 
     <li class="menu-item menu-item--depth-1">Menu item one - one</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item one - two</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item one - three</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item one - four</li> 
 
     </ul> 
 
    </li> 
 

 
    <li class="menu-item menu-item--depth-0"> 
 
     Menu item two 
 
     <ul class="menu-items menu-items--depth-1"> 
 
     <li class="menu-item menu-item--depth-1">Menu item two - one</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item two - two</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item two - three</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item two - four</li> 
 
     </ul> 
 
    </li> 
 

 
    <li class="menu-item menu-item--depth-0">Menu item three</li> 
 

 
    <li class="menu-item menu-item--depth-0"> 
 
     Menu item four 
 
     <ul class="menu-items menu-items--depth-1"> 
 
     <li class="menu-item menu-item--depth-1">Menu item four - one</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item four - two</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item four - three</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item four - four</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <div> 
 
    <button>Some clickable thing</button> 
 
    </div>

Answer 1

.menu-items--depth-0 { 
 
    /* These three give me the horizontal scroll I want, but then the drop-downs don't show */ 
 
    width: 300px; 
 
    overflow-x: auto; 
 

 
    /** You do not require overflow-y **/ 
 
    /* For the sub menus to be displayed, you need to have some height to the element or create some div element below the ul element. So that you can see the sub menus over the div element. */ 
 
    
 
    height: 200px; 
 

 
    white-space: nowrap; 
 
    position: relative; 
 
    z-index: 0; 
 
} 
 

 
.menu-items { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.menu-item--depth-0 { 
 
    display: inline-block; 
 
} 
 

 
.menu-item { 
 
    position: relative; 
 
    border: 1px solid grey; 
 
    height: 30px; 
 
    background: white; 
 
} 
 

 
.menu-items--depth-1 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 200px; 
 
    opacity: 0; 
 
    pointer-events: none; 
 
    transition: 300ms; 
 
    z-index: 1; 
 
} 
 

 
.menu-item--depth-0:hover .menu-items--depth-1 { 
 
    pointer-events: all; 
 
    opacity: 1; 
 
    transform: translateY(30px); 
 
}

<ul class="menu-items menu-items--depth-0"> 
 
    <li class="menu-item menu-item--depth-0"> 
 
     Menu item one 
 
     <ul class="menu-items menu-items--depth-1"> 
 
     <li class="menu-item menu-item--depth-1">Menu item one - one</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item one - two</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item one - three</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item one - four</li> 
 
     </ul> 
 
    </li> 
 

 
    <li class="menu-item menu-item--depth-0"> 
 
     Menu item two 
 
     <ul class="menu-items menu-items--depth-1"> 
 
     <li class="menu-item menu-item--depth-1">Menu item two - one</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item two - two</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item two - three</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item two - four</li> 
 
     </ul> 
 
    </li> 
 

 
    <li class="menu-item menu-item--depth-0">Menu item three</li> 
 

 
    <li class="menu-item menu-item--depth-0"> 
 
     Menu item four 
 
     <ul class="menu-items menu-items--depth-1"> 
 
     <li class="menu-item menu-item--depth-1">Menu item four - one</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item four - two</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item four - three</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item four - four</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <div> 
 
    <button>Some clickable thing</button> 
 
    </div>

Answer 2

, die über das Menü des Containers gehen würde, muss Position: in anderen Fällen festgelegt, die Notwendigkeit, die JS verwenden

Answer 3

Sie könnten versuchen, wie unten, ich habe dies mit ul li Tags anstelle von classes, die und li's mehrere Male zugewiesen wurde, Kopf ul arbeitet als Elternelement über-hier, die width:300px hat und deshalb Scrollbar bei X-Achse und andere Dropdown-Funktionen funktioniert gut, als keine Notwendigkeit fügen Sie position:relative zum übergeordneten Tag hier hinzu, hoffe, das funktioniert.

ul{ 
 
    padding:0; 
 
    background:#ccc; 
 
    width:300px; 
 
    overflow-x:scroll; 
 
    white-space:nowrap; 
 
} 
 
ul > li{ 
 
    list-style:none; 
 
    display:inline-block; 
 
    border: 1px solid grey; 
 
    height: 30px; 
 
    background: white; 
 
} 
 
ul > li > ul{ 
 
    display:block; 
 
    position:absolute; 
 
    white-space:initial; 
 
    overflow:hidden; 
 
    width:155px; 
 
    display:none; 
 
} 
 
ul > li:hover > ul{ 
 
    display:block; 
 
} 
 
ul > li:nth-child(4) > ul{ 
 
    margin-left:-122px; 
 
} 
 
ul > li > ul > li{ 
 
    width:100%; 
 
}

<ul class="menu-items menu-items--depth-0"> 
 
    <li class="menu-item menu-item--depth-0"> 
 
     Menu item one 
 
     <ul class="menu-items menu-items--depth-1"> 
 
     <li class="menu-item menu-item--depth-1">Menu item one - one</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item one - two</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item one - three</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item one - four</li> 
 
     </ul> 
 
    </li> 
 

 
    <li class="menu-item menu-item--depth-0"> 
 
     Menu item two 
 
     <ul class="menu-items menu-items--depth-1"> 
 
     <li class="menu-item menu-item--depth-1">Menu item two - one</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item two - two</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item two - three</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item two - four</li> 
 
     </ul> 
 
    </li> 
 

 
    <li class="menu-item menu-item--depth-0">Menu item three</li> 
 

 
    <li class="menu-item menu-item--depth-0"> 
 
     Menu item four 
 
     <ul class="menu-items menu-items--depth-1"> 
 
     <li class="menu-item menu-item--depth-1">Menu item four - one</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item four - two</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item four - three</li> 
 
     <li class="menu-item menu-item--depth-1">Menu item four - four</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <div> 
 
    <button>Some clickable thing</button> 
 
    </div>