In this tutorial, we’ll see what we can achieve with HTML5 and CSS3 when it comes to a staple of current websites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us.

HTML5 brings to the spec a dedicated <nav> element that should be used as the container for any major navigation structure, such as the main vertical or horizontal site navigation menus, or an in-page table of contents for example.

Using these new features, we'll build a drop-down navigation menu with clean and semantic HTML code.

Here's what we'll be building:

Let's get started.

1. Getting Started

We’ll need a copy of the latest release of jQuery, version 3.6.0 at the time of writing.

Create a project folder somewhere on your machine and call it dropdown-web. Inside this folder, create three new folders: one called index.html for the HTML markup, one called style.css for the styling, and one called script.js for the scripting with jQuery.

2. Create the Underlying Page

Begin by importing jQuery and Font Awesome into the HTML head tags:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>

Next, we code the HTML markup for the nav menu in index.html. You can use any code editor of your choice:

<body>
  <header>
    <div class="header-container">
      <div class="logo">
        <a href="">LOGO</a>
      </div>
      <nav>
        <ul class="menu">

          <!-- Nav -->
          <li class="nav-1">
            <a href="">Nav Link 1</a>
            <i class="fas fa-arrow-down"></i>
            <div class="nav-items-1">
              <a href="">Sub Nav Link 1</a>
              <a href="">Sub Nav Link 2</a>
              <a href="">Sub Nav Link 3</a>
              <a href="">Sub Nav Link 4</a>
            </div>
          </li>

          <!-- Nav -->
          <li class="nav-2">
            <a href="">Nav Link 2</a>
            <i class="fas fa-arrow-down"></i>
            <div class="nav-items-2">
              <a href="">Sub Nav Link 1</a>
              <a href="">Sub Nav Link 2</a>
              <a href="">Sub Nav Link 3</a>
              <a href="">Sub Nav Link 4</a>
            </div>
          </li>

          <!-- Nav -->
          <li class="nav-3">
            <a href="">Nav Link 3</a>
            <i class="fas fa-arrow-down"></i>
            <div class="nav-items-3">
              <a href="">Sub Nav Link 1</a>
              <a href="">Sub Nav Link 2</a>
              <a href="">Sub Nav Link 3</a>
              <a href="">Sub Nav Link 4</a>
            </div>
          </li>

          <!-- Nav -->
          <li class="nav-4">
            <a href="">Nav Link 4</a>
            <i class="fas fa-arrow-down jsicon-2"></i>
            <div class="nav-items-4">
              <a href="">Sub Nav Link 1</a>
              <a href="">Sub Nav Link 2</a>
              <a href="">Sub Nav Link 3</a>
              <a href="">Sub Nav Link 4</a>
            </div>
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <script src="script.js"></script>
</body>
</html>

Using the HTML5 <header> tag, we create a header containing two sections—the logo section and the navigation menu. The navigation menu contains a list of navigations. Each navigation group has a link, an icon from Font Awesome, and a <div> containing four sub nav links. These nav links will be displayed in the dropdown menu.

We assign class attributes to most of the tags, which will enable us to access them in our stylesheet and jQuery script later on. Finally, below the markup, we use a <script> tag to load our script from the script.js file.

3. Add CSS

Now let’s add some basic styling. Create the following stylesheet in style.css:

/* reset padding and margin, set document font */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}

body{
    width: 100%;
    height: 100%;
    background-color: #333;
}

/* Sets color of link texts to white */
a{
    text-decoration: none;
    color: #fff;
    font-weight: 700;
}

li {
    list-style-type: none;
}

/* Header 100 percent of body, position relative to body */
header {
  width: 100%;
  padding: 0 2%;
  background-color: black;
  position: relative;
}

/* Display logo and nav side by side to each other (flex) */
.header-container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Set color for Font Awesome icons */
.fas {
  color: #fff;
}

.logo a {
  font-size: 40px;
}

.menu {
  display: flex;
}

.menu li {
  margin-left: 60px;
}

.menu li a {
  padding: 20px 0;
}

/* Change color of link texts when hovered upon */
.menu li a:hover {
  color: #fb743e;
}

/* Also change color of icon when hover on link */
.menu li a:hover - .fas{
  color: #fb743e;
}

/* Hide all sub nav links by default, display children in column when displayed */
.nav-items-1,.nav-items-2, .nav-items-3, .nav-items-4 {
  text-align: center;
  display: none;
  flex-direction: column;
  background-color: black;
}

.nav-items-1 a, .nav-items-2 a, .nav-items-3 a, .nav-items-4 a {
  font-size: 14px;
}

.nav-items-1, .nav-items-2, .nav-items-3 {
  width: 100%;
  max-width: 150px;
  position: absolute;
  top: 64px;
  padding: 10px;
}

.nav-items-4 {
  width: 100%;
  max-width: 130px;
  position: absolute;
  top: 64px;
}

/* This will be used to display sub links for a nav when active */
.navActive {
  display: flex;
}

We began by resetting the padding and margins for all elements to 0px and setting a typeface for our HTML document.

The .navActive class will be toggled onto whichever navigation item the user hovers over. This will in turn toggle the nav link items in the dropdown below the main text.

This feature will be implemented in the following section using jQuery.

4. Add the Script

The script for toggling each navigation is very simple:

// toggle first nav on hover
$('.nav-1').hover(function() {
  $('.nav-items-1').toggleClass('navActive')
})

// toggle second nav on hover
$('.nav-2').hover(function() {
  $('.nav-items-2').toggleClass('navActive')
})

// toggle third nav on hover
$('.nav-3').hover(function() {
  $('.nav-items-3').toggleClass('navActive')
})

// toggle fourth nav on hover
$('.nav-4').hover(function() {
  $('.nav-items-4').toggleClass('navActive')
})

In the script, we're saying that whenever a user hovers over any element with a class of nav-1, nav-2, nav-3, or nav-4, we want to display its items inside a dropdown menu by toggling the navActive class on the element.

Recall that in our stylesheet, we hid the dropdown elements by default:

.nav-items-1,.nav-items-2, .nav-items-3, .nav-items-4 {
  text-align: center;
  display: none;
  flex-direction: column;
  background-color: black;
}

When a user hovers over any of those elements, the jQuery script will toggle this class on the said element:

1	.navActive {
2	display: flex;
3	}

As a result, the div element and all of its children will go from hidden display to flex display.

Final Thoughts

I hope this tutorial helped you understand HTML5 and CSS better. In the process of building this dropdown navigation menu, we covered some basic CSS selectors and a couple of HTML tags to help you structure and design your webpages.

How to Create a Drop-Down Nav Menu With HTML5, CSS3, and JQuery

1. Getting Started

2. Create the Underlying Page

3. Add CSS

4. Add the Script

Final Thoughts