@anton99zel
29а класс средней школы №7

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

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

А всего в меню 5 пунктов.

Парни, накидайте пожалуйста скелет CSS и HTML, без JS
  • Вопрос задан
  • 302 просмотра
Решения вопроса 1
LenovoId
@LenovoId
I want, women not to get sick
https://codepen.io/anon/pen/zdLwKV?editors=1000 только один выпадающий элемент
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
tomgif
@tomgif
Веб-разработчик
Осталось только накидать стили
<ul class="menu">
  <li class="menu__item">
    <div class="menu__wrapper">
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
    </div>
  </li>
  <li class="menu__item">
    <div class="menu__wrapper">
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
    </div>
  </li>
  <li class="menu__item">
    <div class="menu__wrapper">
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
    </div>
  </li>
  <li class="menu__item">
    <div class="menu__wrapper">
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
    </div>
  </li>
  <li class="menu__item">
    <div class="menu__wrapper">
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
      <a href="" class="menu__link"><img src="" alt="" class="menu__image"></a>
    </div>
  </li>
</ul>
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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