How to create: Dropdown menu navigation bar

Learn how to create a dropdown menu navigation bar.

Create a dropdown menu navigation bar

A dropdown menu will appear when the user moves the mouse over the elements in the navigation bar.

第一步 - Add HTML:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>

Example explanation:

Use any element to open the dropdown menu, such as <button>, <a>, or <p> elements.

Create a dropdown menu using a container element (such as <div>) and add dropdown menu links to it.

Wrap the button and another <div> element with a <div> element to correctly position the dropdown menu using CSS.

第二步 - Add CSS:

/* Navigation bar container */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* Links inside the navigation bar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* It is very important for vertical alignment on mobile devices */
  margin: 0; /* Important for vertical alignment on mobile */
}
/* Add a red background color to the navigation bar links when the mouse hovers */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Dropdown menu content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Links in the dropdown menu */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Add a gray background color to the links in the dropdown menu when the mouse hovers */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* Display the dropdown menu when the mouse hovers */
.dropdown:hover .dropdown-content {
  display: block;
}

Try it yourself

Example explanation:

We have set styles such as background color, padding, etc., for the navigation bar and navigation bar links.

We have set styles such as background color, padding, etc., for the dropdown menu button.

.dropdown class is .dropdown-content container. Since this is a <div> element, not an <a> element, we must make it float to ensure it stays next to the link.

.dropdown-content class containing the actual dropdown menu. It is hidden by default and will be displayed when the mouse hovers over it (see below). Note that the minimum width is set to 160px. Feel free to change this setting.

We did not use borders but used box-shadow property, making the dropdown menu look like a 'card'. We also use z-index Place the dropdown menu in front of other elements.

:hover The selector is used to display the dropdown menu when the user hovers over the dropdown menu button.

Clickable dropdown menus in the navigation bar

Try it yourself

Related pages

Tutorial:CSS Dropdown Menu

Tutorial:How to create clickable dropdown menus

Tutorial:CSS Navigation Bar

Tutorial:How to create a responsive top navigation bar