Sunday, February 11, 2018

How To Create a Dropdown Navigation Bar Using CSS

In this tutorial, we are going to discuss how to create a Hoverable Dropdown Menu using CSS. Here we’ll take advantage of helpful CSS selectors to build a simple dropdown navigation menu.
How to Create a Simple CSS Dropdown Menu

How To Create a Hoverable Dropdown Menu :

Lets see the simple example to create a dropdown box that appears when the user moves the mouse over an element.
dropdown menu.html

<!DOCTYPE html>

 margin:0px auto;
.menu {
    background-color: #ff6a80;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;

.dropdown {
    position: relative;
    display: inline-block;

.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 {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;

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

.dropdown:hover .dropdown-content {
display: block;

.dropdown:hover .menu {
    background-color: #ff6a80;

<div id="main-container">
<h2>Dropdown Menu</h2>

<div class="dropdown"  >
  <button class="menu">Select Category</button>
  <div class="dropdown-content">
    <a href="#">Javascript</a>
    <a href="#">Jquery</a>
    <a href="#">PHP</a>
 <a href="#">Java</a>
 <a href="#">Reactjs</a>
 <a href="#">Android</a>



Download Link :

Demo Link :

This is all about HTML Drop Down Menu Bar Using CSS. Hope you like this tutorial.

No comments:

Post a Comment