How to make a Dropdown Menu in CSS

Keywords

Definition

In this tutorial, I will show you how to create a dropdown menu in plain and simple CSS in order to improve the user experience. In that way, you can create a dropdown menu that allows the user to choose an option from a list embedded in the container.

Code

Define a container class named as dropdown and its properties – width, height, background color.

Create option bars using <p> elements.

Use the first option, <p> element, as the header of the container by using the nth-of-type() selector.

By using the hover pseudo-selector, bring options when the user hovers over the container.

------------CSS----------------
.dropdown{width:200px;height:auto;background-color:slategrey;}

.dropdown p{display:none;height:auto;background-color:black;margin:0;margin-top:2.5px;text-align:center;cursor:pointer;font-size:15px;}
.dropdown p:hover{background-color:transparent;}
.dropdown p:nth-of-type(1){display:block;background-color:slategrey;cursor:default;font-size:25px;}

.dropdown:hover p{display:block;}

------------HTML----------------
<section class="dropdown">
<p>Books</p>
<p>In Search of Lost Time</p>
<p>Ulysses</p>
<p>Don Quixote</p>
<p>The Great Gatsby</p>
<p>Hamlet</p>
<p>War and Peace</p>
</section>


Result:

Books

In Search of Lost Time

Ulysses

Don Quixote

The Great Gatsby

Hamlet

War and Peace