Trusted answers to developer questions

Dropdown menu with HTML and CSS

Free System Design Interview Course

Many candidates are rejected or down-leveled due to poor performance in their System Design Interview. Stand out in System Design Interviews and get hired in 2024 with this popular free course.

In this shot, we will go over how we can create a hoverable dropdown menu using HTML and CSS.

svg viewer

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.

  • HTML
  • CSS (SCSS)

RELATED TAGS

css
menu
html
web development
web design

CONTRIBUTOR

Anusheh Zohair Mustafeez
Copyright ©2024 Educative, Inc. All rights reserved
Did you find this helpful?