The dropdown list seems to overlaps on the current list in the sidebars and I have tried to use the position: relative; in order to make it move downwards but nothing seems to work. I have attached an image to understand the problem that I’m facing.

Image

There is problems trying to figure out how to make sure that the menu-items are pushed down and not display inside the dropdown list.From the CSS, I cannot configure which code triggered the action.

HTML

<nav class="main-menu">
  <h2 class="menu-title">Main Menu</h2>
  <ul class="menu-list">
    <li v-for="(item, index) in mainMenuItems" :key="index" :class="['menu-item', { active: item.active }]" @click="toggleMenuItem(item)">
      <img loading="lazy" :src="item.icon" :alt="`${item.text} icon`" class="menu-icon" />
      <span class="menu-text">{{ item.text }}</span>
      <img v-if="item.expandable" loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/5622eaac7f157249290a781c986056d5b8bc189ab0f414896a487c987140e352?placeholderIfAbsent=true&apiKey=072fca6f880e47769db5f7634dd8a8c6" alt="Expand icon" class="expand-icon" />

      <!-- Dropdown for expandable items -->
      <ul v-if="item.active && item.children" class="submenu-list">
        <li v-for="(subItem, subIndex) in item.children" :key="subIndex" class="submenu-item">
          {{ subItem.text }}
        </li>
      </ul>
    </li>
  </ul>
</nav>

CSS

/* Main Menu & Submenu(Dropdown List) */
.menu-list { 
  list-style-type: none;
  padding: 16px 20px;
  margin: 0;
  border-bottom: 1px solid #f2f3f3;
}
.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 10px;
  border-radius: 10px;
  color: #383a3e;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.menu-item:hover {
  background-color: #f2f3f3;
}
.menu-item.active {
  background: #0e4485;
  color: #fff;
  font-weight: 500;
}
.menu-icon,
.expand-icon {
  width: 24px;
  height: 24px;
}

.submenu-list {
  position: absolute;
  top:100%;
  border: 3px solid #000000;
  display: block;
}
.submenu-item {
  padding: 10px 0;
  color: #383a3e;
}