Hover menu in Sidebar


I’m struggling how can i adjust my hover in the right side.

I have successfully hover the content i like but cant adjust the content.

This is my CSS

.dropdown .dropbtn {
 text-decoration: none;
 color: black;

.dropdown-content {
 display: none;
 min-width: 160px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;

.dropdown-content a:hover {
  background-color: #1f386f;
  color: white;

.dropdown:hover .dropdown-content {
  display: block;


          <div class="dropdown list-group-item list-group-item-action border-0">
                <a class="dropbtn">
                    <b class="ps-4"><i class="bi bi-cart3 pe-4"></i> Products</b>
                <div class="dropdown-content">
                    <a href="#">Products</a>
                    <a href="#">Digital</a>

This is my output

enter image description here

My Expected output

enter image description here



Add these two in your css file . There might be small fixes still left , you just have to change top and right values in dropdown-content , that’s all .

Answered By – Hritik Sharma

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published