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.

<style>

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

}

</style>

<div class=”dropdown”>

<span>Mouse over me</span>

<div class=”dropdown-content”>

<p>Hello World!</p>

</div>

</div>

Leave a Reply

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