horizontales Menü, das mit Dropdown-Menü wischt

Question

Der Klient möchte, dass ich ein Dropdown-Menü erstelle, das wischt und Dropdown-Menü anzeigt, wenn man den Mauszeiger bewegt (weil es auch für die mobile Version ist).

Das Problem verursacht Überlauf-x, die Drop-Down versteckt und es über die Box zeigen muss. Gibt es dafür eine Lösung?

<ul class="scroll-menu"> 
    <li class="scroll-one">HOME</li> 
    <li class="scroll-one">CATEGORY 1 
    <ul class="drop-w"> 
     <li class="dropp">dropdown</li> 
     <li class="dropp">dropdown</li> 
     <li class="dropp">dropdown</li> 
     <li class="dropp">dropdown</li> 
    </ul> 
    </li> 
    <li class="scroll-one">CATEGORY 2</li> 
    <li class="scroll-one">CATEGORY 3</li> 
    <li class="scroll-one">CATEGORY 4</li> 
    <li class="scroll-one">CATEGORY 5</li> 
    <li class="scroll-one">CATEGORY 6</li> 
</ul> 


.scroll-menu .scroll-one { 
display: inline-block; 
width:115px; 
padding: 1%; 

position: relative; 

    list-style: none; 
} 
.scroll-one:hover .drop-w { 
    display: inline-block; 
} 
.drop-w { 
    display: inline-block; 

    position: absolute; 
    top: 30px; 
    left: 5px; 
    display: none; 
} 

Für Demo ich Dropdown-Menü nur auf Category1 erstellt. https://jsfiddle.net/just_vr/ye483e4v/7/

Bitte helfen Sie. Danke

Answer 1

Wie der Kommentar von blonfu, können Sie nicht überlaufen-X scrollen und Überlauf-y sichtbar (https://www.w3.org/TR/css-overflow-3/#overflow-properties). Überlauf-y wird automatisch automatisch, was bedeutet, dass eine Bildlaufleiste auch für die vertikale Darstellung angezeigt wird.

Wenn Sie horizontales Scrollen und vertikales Dropdown möchten, müssen Sie dies programmgesteuert mit Javascript tun. Ein Weg, kann ich vorschlagen, ist:

1. Nehmen Sie die Dropdown-Listen aus dem Mutter ul und machen sie getrennte Listen, sondern innerhalb des übergeordneten nav Element, das Elternteil des Haupt nav ul sein sollte.
2. verknüpfen Sie sie mit IDs oder Klassen mit ihrem übergeordneten Element.
3. Verwenden Sie Javascript, wenn Sie ein Elternelement durch Klicken auswählen, erhalten Sie die aktuelle Position des Haupt-Navigationselements in Bezug auf den übergeordneten Container und geben Sie diese Positionen dann dem entsprechenden Untermenüelement und zeigen sie an.
4. Konnte das selbe für Maus über Ereignis auch tun, wenn Sie wollen.

Hoffe, das hilft.