How to fix dropdown positioning to a sidebar in HTML/CSS

I have been running into an issue with my code, I would like to add a dropdown to the “Dashboard” section, however the items keep appearing next to the title instead of underneath it and the arrow icon that I inserted is not appearing to the right of the “Dashboard” title either.

I have tried doing the code shown down below, but that did not seem to fix the issue. I am unsure of what else to try as I am still learning my way around CSS/HTML and would like the sub items to be underneath the dashboard instead of to the side. Image of result attached.

HTML CODE

 <!-- menu items --> 
        <div class="menu-bar">
            <div class="menu">
                <ul class="menu-links">
                    <li class="nav-link">
                        <a href="#">
                            <i class='bx bx-home-alt icon' ></i>
                            <div class="item"><a href=" "> Dashboard </div> 
                        
                        <!--dropdown for dashboard-->
                        <!--dropdown arrow for dashboard-->
                        <i class="fas fa-angle-right dropdown"></i>
                        </a>
                        <div class="sub-menu">
                            <a href="" class="sub-item"> Sub Item 1 </a>
                            <a href="" class="sub-item"> Sub Item 2 </a>
                        </div>

                    </li>

CSS CODE

.sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 250px; /* 250px */
    padding: 10px 14px; /*  padding: 10px 14px; */ 
    background: var(--sidebar-color);
    transition: var(--tran-05);
    z-index: 100;  
}

/* dropdown code */
.item a .dropdown{
position: absolute;
right: 0;
margin: 20px;
transition: 0.3s ease;
}
.item .sub-menu{
background: #262627;
display: none;
}

image of result