How to fix the Sidebar when extend it display below and not sideways

When I try to display on the bottom, it will always display on the right side even after trying to edit with the CSS

I don’t understand on how to change it to make it dropdown below and not on the rightside of the screen

I’m using a vue component and the data’s are stored inside the script

    <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="selectMenuItem(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>

I’m expecting it to be displayed on the bottom of the sidebar of it’s parent and not inside and right of it’s parents