How to create: Large menu

Learn how to create a large menu (full-width dropdown menu in the navigation bar).

Large menu

Try It Yourself

Create a large menu

Create a dropdown menu that appears when the user moves the mouse over the element 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">
      <div class="header">
        <h2>Mega Menu</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>Category 1</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 2</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
        <div class="column">
          <h3>Category 3</h3>
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

Example Explanation:

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

Use the container element (such as <div class="dropdown-content">) to create the dropdown menu, and add a grid (columns), then add dropdown menu links within the grid.

Use the <div class="dropdown"> element to wrap the button and container elements (<div class="dropdown-content">) to properly position the dropdown menu using CSS.

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: inherit; /* Important for vertical alignment on mobile devices */
  margin: 0; /* Important for vertical alignment on mobile devices */
}
/* Add red background color to navigation bar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Dropdown list content (default hidden) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Large menu title (if needed) */
.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}
/* Display the dropdown menu when hovering over */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Create three equal-width columns and make them float side by side */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}
/* Set styles for links within the column */
.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Add background color when hovering over */
.column a:hover {
  background-color: #ddd;
}
/* Clear the float after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Try It Yourself

Example Explanation:

We have set the background color, padding, and other styles for the navigation bar and navigation bar links.

We set the background color, padding, and other styles for the dropdown menu button.

.dropdown-content class containing the actual dropdown menu. It is hidden by default and will be displayed when hovering over (see below). It is positioned directly below the dropdown menu button and the width is set to 100% to cover the entire screen.

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.

.column The class is used to create three side-by-side floating columns within the dropdown menu (to display different categories).

Responsive Large Menu

/* Responsive layout - Make three columns stack together instead of being side by side */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    height: auto;
  }
}

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