I am in the process of designing a website and I have encountered an issue with setting up the sidebar. Specifically, I want to add a submenu to the sidebar, but when I click on one sidebar item, both arrows move together. I have tried adjusting the code, but I am unsure what else needs to be added. Can someone please guide me on where to include the submenu script in HTML?
https://i.sstatic.net/8lt5Q.png
-- Both arrows move simultaneously when one is clicked
.main_box .sidebar_menu {
position: fixed;
height: 100vh;
width: 280px;
left: -280px;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0px 0px 6px rgba(255, 255, 255, 0.5);
overflow: hidden;
transition: all 0.3s linear;
}
.sidebar_menu .menu {
position: absolute;
top: 80px;
width: 100%;
}
.sidebar_menu .menu li {
margin-top: 6px;
padding: 14px 20px;
position: relative;
}
.sidebar_menu .menu i {
color: #fff;
font-size: 20px;
padding-right: 8px;
}
.sidebar_menu .menu li span {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
transition: transform 0.4s;
font-size: 22px;
color: #fff;
}
.sidebar_menu .menu:hover li span {
transform: translateY(-50%) rotate(-180deg);
}
.sidebar_menu .menu a {
color: #fff;
font-size: 20px;
text-decoration: none;
}
.sidebar_menu .menu li:hover {
border-left: 1px solid #fff;
box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}<div class="menu">
<ul>
<li>
<i class="fas fa-qrcode"> Friends<span class="fas fa-caret-down"></span></i>
</li>
<li>
<i class="fas fa-stream"> Updates<span class="fas fa-caret-down"></span></i>
</li>
</ul>
</div>