Hoverable Dropdown CSS

 

 

.dropbtn{padding:16px;border:none;background-color:#5558da;color:white;font-size:16px;}
.dropdown{display:inline-block;position:relative;}
.dropdown-content{display:none;position:absolute;z-index:1;min-width:160px;background-color:#f1f1f1;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);}
.dropdown-content a{display:block;padding:12px 16px;color:black;text-decoration:none;}
.dropdown-content a:hover{background-color:#ddd}
.dropdown:hover .dropdown-content{display:block;}
.dropdown:hover .dropbtn{background-color:#3538ca;}

 

 

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>