How To Make CSS Dropdowns

Posted by

How To Make CSS Dropdowns

Basic Dropdown

Create a dropdown box that appears when the user moves the mouse over an element.


.dropdown {

position: relative;

display: inline-block;


.dropdown-content {

display: none;

position: absolute;

background-color: #f9f9f9;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

padding: 12px 16px;

z-index: 1;


.dropdown:hover .dropdown-content {

display: block;



<div class=”dropdown”>

<span>Mouse over me</span>

<div class=”dropdown-content”>

<p>Hello World!</p>



Leave a Reply

Your email address will not be published. Required fields are marked *