How to Create Hoverable Dropdown Navigation HTML and CSS

Hello Geeks👋, whenever you visit any website, you must have seen the navigation menu at the top of the website. With the help of this navigation menu, we are able to access the content of the entire website. With this, we can also understand the structure of the web site, if you are a web developer or are learning to create web pages. So you should also learn how to make navigation menus. Because the navigation menu is the main component of any website.

In this article, we will learn how to create a Hoverable navigation menu using HTML and CSS. You are going to enjoy it a lot. Because we have kept it super easy.

Page Content hide

1. What is Dropdown Navigation?

2. How to Create Hoverable Dropdown Navigation HTML and CSS

3. Full Source Code: Dropdown Navigation Menu

4. How to use this code?

What is Dropdown Navigation?

First let’s understand what is this navigation menu? To access the content of any website and different webpages, a set of links is created, which we call the navigation menu. When more child links are added under one link of a navigation, then it is called dropdown navigation.

Demo Hoverable Dropdown Menu:→

How to Create Hoverable Dropdown Navigation HTML and CSS

1.Open code editor, Write all the necessary HTML tags(html, head, title, body)

2.Start a <div> with class .navbar under <body> tag

<div class="navbar">
...
...
...
</div>

3.Add links to Navigation for use this code.

<a href="#home"><i class="fa fa-home"></i> Home</a>
  <a href="#news"><i class="fa fa-user"></i> Login</a>
  <a href="#home"><i class="fa fa-sign-in"></i> Register</a>
  <div class="dropdown">
    <button class="dropbtn">  <i class="fa fa-bookmark"></i> Blog
      <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>

4.Finally add styling to our Dropdown Navigation. Add following CSS code under <style>…</style> above the </head> tag.

<style>

body {
  font-family: Arial;
  margin: 0px;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: blue;
}

.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;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

Full Source Code: Dropdown Navigation Menu

To make it easier for you to create a navigation menu, we have given you the complete source code of this project here. You can download it and use it for free.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>

body {
  font-family: Arial;
  margin: 0px;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: blue;
}

.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;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<div class="navbar">
  <a href="#home"><i class="fa fa-home"></i> Home</a>
  <a href="#news"><i class="fa fa-user"></i> Login</a>
  <a href="#home"><i class="fa fa-sign-in"></i> Register</a>
  <div class="dropdown">
    <button class="dropbtn">  <i class="fa fa-bookmark"></i> Blog
      <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>


</body>
</html>

Download Code

How to use this code?

1.Open your Text or Code Editor.

2.Simply Copy this code and Paste it.

3.Save file name with dropdwon.html extension.

4.Now open dropdown.html in browser.

5.Calculations You have successfully created the dropdown menu.