горизонтальное меню, которое отображается с выпадающим меню

Question

Клиент хочет, чтобы я создал выпадающее меню, которое просматривает и показывает выпадающее меню при наведении/нажатии (это также относится к мобильной версии).

Проблема вызывает переполнение-x, которое скрывает выпадающее меню, и оно должно отображаться над полем. Есть ли решение для этого?

<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; 
} 

Для демонстрации я построил выпадающее меню только на категории1. https://jsfiddle.net/just_vr/ye483e4v/7/

Просьба помочь. Спасибо

Answer 1

В соответствии с комментарием blonfu вы не можете видеть переполнения-x прокрутки и переполнения-y (https://www.w3.org/TR/css-overflow-3/#overflow-properties). overflow-y автоматически становится автоматически, что означает, что полоса прокрутки также отображается для вертикали.

Если вы хотите горизонтальное прокручивание и вертикальное раскрывающееся меню, вам придется делать это программно с помощью javascript. Один из способов предложить:

1. Возьмите выпадающие списки из родительской ul и сделайте их отдельными списками, но внутри родительского элемента навигации, который должен быть родителем главного навигационного элемента ul.
2. свяжите их с использованием идентификаторов или классов с их родительским элементом.
3. Использование javascript при выборе родительского элемента посредством щелчка, получить текущую позицию основного элемента навигации относительно родительского контейнера, а затем предоставить эти позиции соответствующему элементу подменю и отобразить их.
4. Могли бы сделать то же самое и для мыши над событием, если хотите.

Надеюсь, это поможет.