<div class="menu">
  <nav class="menu-upperNav">
    <ul>
      <li class="menu-upperNav_buttons" data-li="all">Всё</li>
      <li class="menu-upperNav_buttons" data-li="modern">Модерн</li>
      <li class="menu-upperNav_buttons" data-li="classic">Классика</li>
    </ul>
  </nav>
  <nav class="menu-lowerNav">
    <ul class="menu-lowerNav_ul active" data-ul="all">
      <li>все</li>
      <li>все</li>
      <li>все</li>
    </ul>
    <ul class="menu-lowerNav_ul" data-ul="modern">
      <li>Все</li>
      <li>Пластик</li>
      <li>Пленка</li>
      <li>Шпон</li>
      <li>Краска</li>
    </ul>
    <ul class="menu-lowerNav_ul" data-ul="classic">
      <li>классика</li>
      <li>классика</li>
      <li>классика</li>
    </ul>
  </nav>
</div>
* {
  margin: 0;
  padding:0;
}
body , html {
  width: 100vw;
  height:100vh;
}

.menu {
  width: 300px;
  height: 80px;
  display:flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  nav {
    height: 50%;
    ul {
      display:flex;
      justify-content: center;
      height: 100%;
      list-style-type: none;
      li {
        display:flex;
        align-items: center;
        justify-content: center;
        cursor:pointer;
      }
      
      &:hover {
            font-weight: 800;
      }
    }
  }
  .menu-upperNav {
    width: 100%;
    ul {
      width: 100%;
      li {
        width: 33.33%
      }
    }
  }
  .menu-lowerNav {
    display:flex;
    justify-content: center;
    position: relative;
    width: 300px;
    height: 0;
    opacity: 0;
    transition: 0.5s ease-in;

    ul.active {
      display:flex;
      z-index: 999;
      background: red;
    }
    .menu-lowerNav_ul {
      display:none;
      position: absolute;
      justify-content: none;
      z-index: -1;
      margin: 0 auto;
      li {
        padding: 0 10px;
      }
      li:hover {
        background: white;
      }
      & > * + * {
        margin-left: 10px;
      }
    }
  }
  
   .menu-lowerNav:hover,
   .menu-upperNav:hover ~ .menu-lowerNav {
    height: 50%;
    opacity:1;
  }
  
}
View Compiled
const buttons = document.querySelectorAll(".menu-upperNav_buttons");
const arrayOf_ul = document.querySelectorAll(".menu-lowerNav_ul");
      
buttons.forEach((button,index) => {
  button.onclick = () => {
     arrayOf_ul.forEach( ul => {
        const idBT = button.dataset.li
        const idUL = ul.dataset.ul
        
        if(idBT === idUL) ul.classList.add("active")
        else ul.classList.remove("active")
     })
  } 
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.