In this shot, we will go over how we can create a hoverable **dropdown menu** using HTML and [CSS](https://www.educative.io/answers/what-are-cascading-style-sheets-css).

# Code

We write the basic structure of the dropdown menu in HTML using `<div>`'s and wrap everything in a container element like `<span>`.  

In CSS, we add style to the dropdown button, dropdown content, and each option div. We set `display: none` for dropdown content so that it is hidden by default and only becomes visible when the dropdown button is hovered over: `.dropdown:hover .dropdown-content {
  display: block;
}`
We also add options and button highlighting using `:hover` styles.

/* Style for dropdown button */
.dropbtn {
  background-color: #5d5fd6;
  color: white;
  padding: 10px;
  font-size: 15px;
  border: none;
  cursor: pointer;
}

/* Style for dropdown content */
.dropdown-content {
  display: none; /* Hidden by default */
  position: absolute;
  background-color: #ffffff;
  min-width: 85px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Style for each content div */
.dropdown-content div {
  padding: 10px 5px;
}

/* Highlight dropdown options on hover */
.dropdown-content div:hover {
  background-color: #eaeaea;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Highlight dropdown button when dropdown menu is open */
.dropdown:hover .dropbtn {
  background-color: #474885;
}


<span class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <div>Option 1</div>
    <div>Option 2</div>
    <div>Option 3</div>
  </div>
</span>

codemirror

Dropdown menu with HTML and CSS

Code We write the basic structure of the dropdown menu in HTML using  s and wrap everything in a container element like . In CSS, we add style to the dropdown button, dropdown content, and each option div. We set display: none for dropdown content so that it is hidden by default and only becomes visible when the dropdown button is hovered over: .dropdown:hover .dropdown-content {   display: block; } We also add options and button highlighting using :hover styles. 