How to create: The "More" button in the navigation bar

Learn how to create a "More" button.

The "More" button in the navigation bar

Try it yourself

Create a dropdown menu navigation bar

A dropdown menu will appear when the user hovers over the elements within the navigation bar.

Step 1 - Add HTML:

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">More
      <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 within it.

Wrap the button and another <div> element with a <div> element to use CSS for proper positioning of the dropdown menu.

Step 2 - Add CSS:

/* Navigation bar container */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* Links within the navigation bar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Dropdown menu container */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Dropdown menu button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical alignment on mobile */
  margin: 0; /* Important for vertical alignment on mobile */
}
/* Add a red background color to the navigation bar links when hovered */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Dropdown menu content (default is hidden) */
.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 within the dropdown menu */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Add a grey background color to the dropdown menu links when hovered */
.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 and padding for the navigation bar and navigation links.

We have set styles such as background color and padding 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 moves the mouse over the dropdown menu button.

Related pages

Tutorial:CSS Dropdown Menu

Tutorial:How to create a clickable dropdown menu

Tutorial:CSS Navigation Bar

Tutorial:How to create a responsive top navigation bar