CSS Dropdowns

In this chapter, we will learn how to create and style dropdown menus using CSS. Dropdown menus are a common feature in web design, providing a way for users to access additional options or navigate to different sections of a website. We will cover:

• Introduction to Dropdown Menus
• Creating a Simple Dropdown Menu
• Styling Dropdown Menus
• Creating Multi-Level Dropdown Menus
• Responsive Dropdown Menus
• Examples of Dropdown Menus

Introduction to Dropdown Menus

A dropdown menu is a list of links or options that appears when a user clicks or hovers over a button or link. Dropdown menus can be used for navigation, forms, and other interactive elements.

Creating a Simple Dropdown Menu

To create a simple dropdown menu, you can use an unordered list (<ul>) with list items (<li>) and anchor (<a>) tags for the links. Use CSS to style the dropdown content and make it visible on hover.

HTML

<nav>
  <ul>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Menu</a>
      <div class="dropdown-content">
        <a href="#link1">Link 1</a>
        <a href="#link2">Link 2</a>
        <a href="#link3">Link 3</a>
      </div>
    </li>
  </ul>
</nav>

Styling Dropdown Menus

Use CSS to style the dropdown menu and make it functional.

CSS

/* Style the navigation bar */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

nav ul li {
  float: left;
}

/* Style the dropdown button */
nav ul li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
nav ul li a:hover, .dropdown:hover .dropbtn {
  background-color: #111;
}

/* Hide the dropdown content */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the dropdown links */
.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Change color on hover */
.dropdown-content a:hover {
  background-color: #111;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

HTML

<nav>
  <ul>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Menu</a>
      <div class="dropdown-content">
        <a href="#link1">Link 1</a>
        <a href="#link2">Link 2</a>
        <a href="#link3">Link 3</a>
      </div>
    </li>
  </ul>
</nav>

Creating Multi-Level Dropdown Menus

To create multi-level dropdown menus, nest another <ul> within a dropdown item.

CSS

Extend the existing dropdown styles to handle multi-level menus.

/* Dropdown submenu */
.dropdown-content .submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 1px;
}

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

HTML

<nav>
  <ul>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Menu</a>
      <div class="dropdown-content">
        <a href="#link1">Link 1</a>
        <a href="#link2">Link 2</a>
        <div class="submenu">
          <a href="#link3">Link 3</a>
          <a href="#link4">Link 4</a>
        </div>
        <a href="#link5">Link 5</a>
      </div>
    </li>
  </ul>
</nav>

Responsive Dropdown Menus

To create responsive dropdown menus that adapt to different screen sizes, use media queries.

CSS

@media screen and (max-width: 600px) {
  nav ul {
    display: flex;
    flex-direction: column;
  }

  nav ul li {
    width: 100%;
  }

  nav ul li a {
    text-align: left;
  }

  .dropdown-content {
    position: relative;
  }

  .dropdown-content .submenu {
    position: relative;
    left: 0;
    top: 0;
  }
}

HTML

<nav>
  <ul>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Menu</a>
      <div class="dropdown-content">
        <a href="#link1">Link 1</a>
        <a href="#link2">Link 2</a>
        <div class="submenu">
          <a href="#link3">Link 3</a>
          <a href="#link4">Link 4</a>
        </div>
        <a href="#link5">Link 5</a>
      </div>
    </li>
  </ul>
</nav>

Examples of Dropdown Menus

Example 1: Basic Dropdown Menu

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

nav ul li {
  float: left;
}

nav ul li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav ul li a:hover, .dropdown:hover .dropbtn {
  background-color: #111;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #111;
}

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

HTML

<nav>
  <ul>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Menu</a>
      <div class="dropdown-content">
        <a href="#link1">Link 1</a>
        <a href="#link2">Link 2</a>
        <a href="#link3">Link 3</a>
      </div>
    </li>
  </ul>
</nav>

Example 2: Multi-Level Dropdown Menu

.dropdown-content .submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 1px;
}

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

HTML

<nav>
  <ul>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Menu</a>
      <div class="dropdown-content">
        <a href="#link1">Link 1</a>
        <a href="#link2">Link 2</a>
        <div class="submenu">
          <a href="#link3">Link 3</a>
          <a href="#link4">Link 4</a>
        </div>
        <a href="#link5">Link 5</a>
      </div>
    </li>
  </ul>
</nav>

Example 3: Responsive Dropdown Menu

@media screen and (max-width: 600px) {
  nav ul {
    display: flex;
    flex-direction: column;
  }

  nav ul li {
    width: 100%;
  }

  nav ul li a {
    text-align: left;
  }

  .dropdown-content {
    position: relative;
  }

  .dropdown-content .submenu {
    position: relative;
    left: 0;
    top: 0;
  }
}

HTML

<nav>
  <ul>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">Menu</a>
      <div class="dropdown-content">
        <a href="#link1">Link 1</a>
        <a href="#link2">Link 2</a>
        <div class="submenu">
          <a href="#link3">Link 3</a>
          <a href="#link4">Link 4</a>
        </div>
        <a href="#link5">Link 5</a>
      </div>
    </li>
  </ul>
</nav>

Conclusion

In this chapter, you learned how to create and style dropdown menus using CSS, including basic dropdown menus, multi-level dropdown menus, and responsive designs. Understanding how to create effective dropdown menus is essential for improving user experience and making your website easy to navigate.