Избитый вопрос о том, как сделать выпадающие меню как на сайте по ссылке в описании?

Question

[Фёдор]

Здравствуйте! Дан сайт, на котором надо реализовать выпадающие меню, согласно этому сайту. (прим.раздел "Каталог товаров" ). https://yug-svc.kz/. Пытаюсь сделать следующим образом:



Получается при позиционировании top: 45px; образуется "дырка" в следствии чего пропадает действие :hover-a и выпадающее меню, соответственно, пропадает. Как можно этого избежать? Понимаю, вопрос избит. Но уже пару часов тыкаюсь с этим и не могу понять, как решить данную проблему.

Comments

[Андрей Новиков]

Насколько я понял, тут нужно сделать обертку над элементом и этой дыркой. Потом вешать hover на нее. На скринах top: 45px не видно, точно сложно сказать.

[Фёдор]

Андрей Новиков,

[Андрей Новиков]

Фёдор, Там на сайте в вашем примере тоже самое - если навести курсор между кнопкой и меню, то оно пропадает. Там просто стоит transition примерно пол секунды, поэтому при перетаскивании мыши меню пропасть не успевает.

Answer 1

[YavaDev]

Это должно помочь

.catalog-dropdown:before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 45px;
}

Это если catalog-dropdown открывается вниз.
Суть в том, что с помощью before (или after) надо просто закрыть дыру. А так как before, в данном случае, является частью catalog-dropdown, то ховер не исчезнет.

Comments

[Фёдор]

Я так понимаю. Данный вариант не сработает при появлении бокового подменю?

[YavaDev]

Ну для бокового меню надо просто поменять позицию before. Например если выпадающий список будет открываться вправо, как на сайте примере, и там тоже будет дырка, тогда пишем такой код

.class:before {
    content: '';
    position: absolute;
    right: 100%;
    top: 0;
    width: 45px;
    height: 100%;
}

[Фёдор]

YavaDev , спасибо