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.

Step 1 - 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>

Eksempel på forklaring:

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 correctly position the dropdown menu using CSS.

Step 2 - 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; /* For vertical alignment on mobile devices */
  margin: 0; /* Vigtigt for lodret justering på mobiltelefoner */
}
/* Tilføjer en rød baggrundsfarve til navigationsfeltets links ved museoverførsel */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Indholdet af undermenuen (skjult som standard) */
.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 i undermenuen */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Tilføjer en grå baggrundsfarve til undermenuens links ved museoverførsel */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* Viser undermenuen ved museoverførsel */
.dropdown:hover .dropdown-content {
  display: block;
}

Prøv det selv

Eksempel på forklaring:

Vi har allerede sat baggrundsfarve, indrykning og andre stilarter for navigationsfeltet og navigationsfeltets links.

Vi har allerede sat baggrundsfarve, indrykning og andre stilarter for undermenuknappen.

.dropdown klassen er .dropdown-content containeren. Da dette er en <div>-element og ikke en <a>-element, skal vi gøre det flydende for at sikre, at det forbliver ved siden af linket.

.dropdown-content klassen indeholder den faktiske undermenu. Den er som standard skjult og vises ved museoverførsel (se nedenfor). Bemærk, at minimumsbredden er sat til 160px. Du kan frit ændre denne indstilling.

Vi bruger ikke kanter, men box-shadow egenskab, gør undermenuen ser ud som et 'kort'. Vi bruger også z-index Placer undermenuen foran andre elementer.

:hover Vælgeren bruges til at vise undermenuen, når brugeren flytter musen over undermenuknappen.

Klikbare undermenuer i navigationsfeltet

Prøv det selv

Relaterede sider

Tilførsel:CSS dropdown-menu

Tilførsel:Sådan opretter du et klikbart undermenu

Tilførsel:CSS navigationsfelt

Tilførsel:Sådan opretter du et responsivt topmenu