@Kolli-Jam
Начинающий web-разработчик

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

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

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

Сколько искал по попапам, не нашел(вполне вероятно плохо искал), буду благодарен если укажете куда копать, а еще лучше скините готовый пример.
  • Вопрос задан
  • 67 просмотров
Решения вопроса 2
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
CEO iAmStudio, предприниматель.
Либо чисто hover на стилях, либо на JS. Псевдокласс на пункт li распространяются на вложенные в нем списки.
Ответ написан
BormotunJedy
@BormotunJedy
Верстальщик
Пишите меню:
<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, потому что подменю вложено в пункт меню.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы