Задать вопрос
@anton99zel
29а класс средней школы №7
html

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

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

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

Парни, накидайте пожалуйста скелет CSS и HTML, без JS
  • Вопрос задан
  • 304 просмотра
1 комментарий
Подписаться 1 Оценить 1 комментарий
Решения вопроса 1
LenovoId
@LenovoId
svg, css,js
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>
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
WordPress-разработчик
div. • Ставрополь
от 50 000 до 120 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать несколько гиф анимаций
22 нояб. 2024, в 21:47
3000 руб./за проект
Доделать сайт на Revolution 3
22 нояб. 2024, в 21:44
50000 руб./за проект
Анализ и оценка проектов, с последующим запуском
22 нояб. 2024, в 20:20
1000 руб./в час
Ещё заказы