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;
}