Skip to main content
Practice

Dropdown Menu

A Dropdown Menu is a UI component that shows additional menu options when clicked or hovered over. It is often used in navigation menus, settings menus, etc.


Code Analysis​

HTML​

<div class="dropdown">
  <img
    class="dropdown-icon"
    src="https://assets.codefriends.net/templates/web/portfolio-2/assets/hamburger.png"
  />
  <ul class="dropdown-content">
    <li><a href="#intro">WORK</a></li>
    <li><a href="#career">PROJECTS</a></li>
    <li><a href="#about">ABOUT</a></li>
  </ul>
</div>

  • .dropdown: The parent element that wraps the entire Dropdown menu.

  • .dropdown-icon: The icon that is clicked or hovered over to use the Dropdown menu. Here, we use a hamburger icon.

  • .dropdown-content: The parent element that contains the contents of the Dropdown menu. We define the menu items in a list form using the ul element.


CSS​

.dropdown {
  position: relative;
  display: none;
  cursor: pointer;
  margin-right: 24px;
}

.dropdown-icon {
  width: 20px;
  height: 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0px;
  margin-top: 22px;
  min-width: 200px;
  background-color: #fffcf9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 20;
}

.dropdown:hover {
  padding-left: 200px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content li {
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}

.dropdown-content li a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.dropdown-content li:hover {
  color: #000;
  background-color: #ddd;
}

  • .dropdown styles: Defines the basic styles for the parent element of the Dropdown menu.

  • .dropdown-icon styles: Specifies the size of the icon.

  • .dropdown-content styles: Defines the styles for the menu contents. Initially set to display: none; to make it invisible.

  • .dropdown:hover .dropdown-content styles: Displays the menu contents when the Dropdown menu is hovered over.

  • .dropdown-content li and .dropdown-content li a styles: Defines styles for the menu items and their links.

  • .dropdown-content li:hover styles: Defines the styles when a menu item is hovered over.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.