Нужно создать раскрывающийся блок при наведений на элемент списка. Как сделать?

Question

[Kolli-Jam]

Сейчас делаю сайт интернет-магазин, и вот там нужно сделать так что бы, при наведений на один из пунктов меню появлялся блок с товарами по этой категории, а при выходы за пределами блока исчезал.

Что бы работал также как на этих сайтах:
https://shop.kz/
https://aptekaplus.kz/

Сколько искал по попапам, не нашел(вполне вероятно плохо искал), буду благодарен если укажете куда копать, а еще лучше скините готовый пример.

Comments

[Elena Fire]

На этих сайтах меню реализован не только на css. Там и js есть.

Answer 1

[Арсений Матыцин]

Либо чисто hover на стилях, либо на JS. Псевдокласс на пункт li распространяются на вложенные в нем списки.

Comments

[Kolli-Jam]

Можно немного по подобнее, ссылки на тех кто делал или тему как делать?

Answer 2

[Elena Fire]

Пишите меню:

<ul class="main-menu">
    <li class="with-submenu">Конфеты
           <ul class="submenu">
               <li>Шоколадные</li>
               <li>Карамельки</li>
               <li>С начинкой</li>
          </ul>
    </li>
    <li>Вафли</li>
    <li>Торты</li>
</ul>

И немного css:

.submenu {
display: none;
}
li.with-submenu:hover .submenu {
display: block;
}

Это возможно реализовать через css, потому что подменю вложено в пункт меню.

Comments

[Kolli-Jam]

Не знаете решений как сделано в сайтах в посте?

[Elena Fire]

https://codepen.io/BormotunJedy/pen/zYNQYrv - горизонтальное меню
https://codepen.io/JJohn_J/pen/KdaPmq - вертикальное меню от Joe Jones

[Kolli-Jam]

Elena Fire, спасибо, после коммента тоже поискал, и нашел что во второй ссылке. Уже встроил и под себя подстроил :)

[Elena Fire]

Kolli-Jam, ну вот и славно)

[Kolli-Jam]

Elena Fire, если не трудно, то не знаете как застилизовать так что бы меню появлялось под кнопкой, независимо от положения кнопки?

Вот ссылка на код:
https://jsfiddle.net/Lbw60zm3/

[Elena Fire]

Kolli-Jam, у вас прям и fixed и relative у меню)) поставьте position: absolute;
И меню будет жестко привязано к кнопке каталога - куда кнопка, туда и меню.

[Kolli-Jam]

попробовал так и так поставить absolute, но не получается.

[Elena Fire]

Ясно, тогда надо ковыряться в коде.

[Kolli-Jam]

Elena Fire, методом проб и интренета, выяснил что нужно завернуть кнопку и меню в один родитель, предварительно задав по position: absolute; , после же кнопке ничего не задавая, дать меню немного превыщающию высоту кнопки, и после этого кнопка с меню будут "приклеены" друг к другу.

Answer 3

[ForSureN1]

https://html5css.ru/howto/howto_css_dropdown.php
попробуй

Comments

[Kolli-Jam]

А как сделать так что бы текст в появившемся блоке, был в отдельных колонках?

[Elena Fire]

Можно. Для этого прописываются стили вложенного подменю, например:

.submenu {
display: flex;
flex-direction: column;
}

И текст встанет в колонки. Хотя для большей конкретики надо видеть код вашего меню.