Dropdown menu in navigation bar

Next Page >>
div class container

How to » Dropdown menu in navigation bar

Study in this chapter:
1. - How to add responsive drop-down menu in navigation bar
2. - dropdown menu in Javascript
3. - simple dropdown menu navbar responsive on hover

1. To add responsive drop-down menu in navigation bar use a container element as <div> to create the dropdown menu and add the dropdown links inside it.

We can add CSS style to make dropdown menu in navigation bar as:
Internal Style - by using a <style> element in the <head> section
External Style - by using an external CSS file as style.css

Example:

CSS code - Dropdown menu in navigation bar

Add CSS: We have styled the navigation bar and navigation bar links with a background color, adding borders, padding, etc.

Example:

body {
font-family: Georgia, "Times New Roman", Times, serif;
margin-top: 8px;
margin-right: 12px;
margin-bottom: 8px;
margin-left: 12px;
}
.header {
height: 40px;
width: 100%;
margin-right: auto;
margin-left: auto;
padding-top: 12px;
padding-bottom: 12px;
font-size: 36px;
font-weight: bold;
background-color: #EFEFEF;
}
.navbar {
overflow: hidden;
background-color: #006;
font-weight: bold;
}

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

.dropdown {
float: left;
overflow: hidden;
font-weight: bold;
}

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

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

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

Dropdown menu in navigation bar - HTML code

Creating a simple drop-down menu that appears when the user hovers over an element inside a navigation bar. Entire HTML code - example

<!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: Georgia, "Times New Roman", Times, serif;

  margin-top: 8px;

  margin-right: 12px;

  margin-bottom: 8px;

  margin-left: 12px;

  }

  .header {

  height: 40px;

  width: 100%;

  margin-right: auto;

  margin-left: auto;

  padding-top: 12px;

  padding-bottom: 12px;

  font-size: 36px;

  font-weight: bold;

  background-color: #EFEFEF;

  }

  .navbar {

  overflow: hidden;

  background-color: #006;

  font-weight: bold;

  }
.navbar a {

  float: left;

  font-size: 16px;

  color: white;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  }
.dropdown {

  float: left;

  overflow: hidden;

  font-weight: bold;

  }
.dropdown .dropbtn {

  font-size: 16px;

  border: none;

  outline: none;

  color: white;

  padding: 14px 16px;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

  font-weight: bold;

  }
.navbar a:hover, .dropdown:hover .dropbtn {

  background-color: red;

  }
.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="header">Logo_website</div>

  <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>
<h3>Dropdown Menu  hover effects inside a Navigation Bar</h3>

  <p>Hover effects over the "Dropdown" link to see the dropdown menu.</p>
</body>

  </html>

Tags: dropdown menu navbar responsive on hover with and without Javascript, left. How do I add / to make a drop-down menu in navigation bar?

Responsive Topnav with Dropdown with JavaScript

"Execute" the program in the editor then Hover over the dropdown button to open the dropdown menu. Example

<!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 {margin:4;font-family:Arial}
.topnav {

  overflow: hidden;

  background-color: #036;

  }
.topnav a {

  float: left;

  display: block;

  color: #f2f2f2;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  font-size: 17px;

  }
.active {

  background-color: #04AA6D;

  color: white;

  }
.topnav .icon {

  display: none;

  }
.dropdown {

  float: left;

  overflow: hidden;

  }
.dropdown .dropbtn {

  font-size: 17px; 

  border: none;

  outline: none;

  color: white;

  padding: 14px 16px;

  background-color: inherit;

  font-family: inherit;

  margin: 0;

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

  }
.topnav a:hover, .dropdown:hover .dropbtn {

  background-color: #555;

  color: white;

  }
.dropdown-content a:hover {

  background-color: #ddd;

  color: black;

  }
.dropdown:hover .dropdown-content {

  display: block;

  }
@media screen and (max-width: 600px) {

  .topnav a:not(:first-child), .dropdown .dropbtn {

  display: none;

  }

  .topnav a.icon {

  float: right;

  display: block;

  }

  }
@media screen and (max-width: 600px) {

  .topnav.responsive {position: relative;}

  .topnav.responsive .icon {

  position: absolute;

  right: 0;

  top: 0;

  }

  .topnav.responsive a {

  float: none;

  display: block;

  text-align: left;

  }

  .topnav.responsive .dropdown {float: none;}

  .topnav.responsive .dropdown-content {position: relative;}

  .topnav.responsive .dropdown .dropbtn {

  display: block;

  width: 100%;

  text-align: left;

  }

  }

  </style>

  </head>

  <body>
<div class="topnav" id="myTopnav">

  <a href="#home" class="active">Home</a>

  <div class="dropdown">

  <button class="dropbtn">Services 

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

  <a href="#contact">Contact</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> 

  <a href="#about">About</a>

  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>

  </div>
<div style="padding-left:16px">

  <h2>Responsive Topnav with Dropdown<br />

  with JavaScript

  </h2>

  <p>Resize the browser window to see how it works.</p>

  <p>Hover over the dropdown button to open the dropdown menu.</p>

  </div>
<script>

  function myFunction() {

  var x = document.getElementById("myTopnav");

  if (x.className === "topnav") {

  x.className += " responsive";

  } else {

  x.className = "topnav";

  }

  }

  </script>
</body>

  </html>

Summary of description

<< Previous Page
HTML Button Style

Next Page >>
HTML Button Action

dropdown menu navbar responsive on hover with and without Javascript, left. How do I add / to make a drop-down menu in navigation bar?
Dropdown menu in the navigation bar - how to

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.