Drop Down menu in sub category effect

Question

i am create navbar with dropdown sub menu in navbar

code like this:

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">lorem ....</a></li>
  <li><a class="dropdown-item" href="#">lorem ....</a></li>
  <li><a class="dropdown-item" href="#">lorem ....</a></li
</ul>

my dropdown like this :

I want a drop-down menu like this:

Answer 1

Please try this:

const dropdown = document.querySelector('.container');

track = 0;

dropdown.addEventListener('click', () => {
  const container = document.querySelector('.item-container');

  if (track === 0) {
    container.style.maxHeight = '700px';
    track++;
  } else {
    container.style.maxHeight = '0px';
    track--;
  }
})

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Lato', sans-serif;
}

.space {
  height: 20%;
}

.layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgb(236, 236, 236);
  height: 60%;
  min-height: fit-content;
}

.container .item-container {
  max-height: 0;
  transition: max-height 0.3s;
  overflow: hidden;
}

.container {
  margin-top: 25px;
  text-align: center;
  background: rgb(223, 223, 223);
  border-radius: 5px;
  border: 1px solid white;
  max-width: 300px;
  min-width: 300px;
  box-shadow: 0px 0px 5px black;
}

.container:hover {
  background: rgb(212, 212, 212);
}

.dropdown-title {
  margin: 15px 0px 15px 0px;
  min-height: 10px;
  font-weight: 900;
  font-size: 1.3rem;
}

.item-container {
  background: rgb(255, 255, 255);
  font-size: 1rem;
  border-radius: 0px 0px 3px 3px;
}

.item-text {
  margin: 0px 0px 0px 0px;
  padding: 15px 10px 15px 10px;
  font-weight: 900;
}

.item-text:hover {
  background: rgb(231, 231, 231);
}

<div class="space"></div>

<div class="layout">
  <div class="container">
    <p class="dropdown-title">Sample Title</p>
    <div class="item-container">
      <p class="item-text">Sample Item</p>
      <p class="item-text">Sample Item</p>
      <p class="item-text">Sample Item</p>
      <p class="item-text">Sample Item</p>
      <p class="item-text">Sample Item</p>
    </div>
  </div>
</div>