Выпадающее меню как часть галереи с фильтрацией

Question

Составляю портфолио на сайте, где нужно сделать галерею с фильтрацией картинок, еще нужно сделать некоторые элементы галереи выпадающим списком. Пример:

вот здесь мне нужно, чтоб при наведении курсора на Кухни, у меня раскрывалось меню и появлялся выбор из разных стилей. Шкафы - то же самое, при наведении нужно раскрыть список и предоставить выбор для пользователя, какой шкаф он хочет увидеть (первый, второй, третий). Но самое главное, это сделать так, чтобы если я сначала навелся на Кухни, а потом только на Шкафы, то раскрывающийся список Кухни закрылся, а у Шкафы раскрылся. По отдельности все смог реализовать (галерею с фильтрацией и выпадающий список), но у меня проблема соединить это.

nav {}

nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

nav ul li {
  margin: 0px -7px 0 0;
  display: inline-block;
}

nav a {
  display: block;
  padding: 0 20px;
  color: #000;
  font-size: 20px;
  line-height: 60px;
  text-decoration: none;
}

a {
  text-decoration: none;
  display: inline-block;
  line-height: 1;
  color: #2F73B6;
}

a:after {
  display: block;
  content: "";
  height: 5px;
  width: 0%;
  background-color: #9ccb05;
  transition: width 0.4s ease-in-out;
}

a:hover:after,
a:focus:after {
  width: 100%;
}

<nav>
  <ul>
    <li><a class='link'>Все</a></li>
    <li><a class='link'>Кухни</a></li>
    <li><a class='link'>Тумбы</a></li>
    <li><a class='link'>Стеллажи</a></li>
    <li><a class='link'>Шкафы</a></li>
    <li><a class='link'>About</a></li>
  </ul>
</nav>

БЛОГ НА HUSL

Выпадающее меню как часть галереи с фильтрацией

Ответы (0 шт):