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