HOW TO CREATE DROPDOWN MENU IN CSS HTML.

Ankit Singh

Total Post:341

Points:2389
Posted by  Ankit Singh
HTML  CSS 
 592  View(s)
Ratings:
Rate this:
We want to  create Dropdown Menu in css Html. How to do this Please Help me.
  1. aditya kumar Patel

    Post:254

    Points:1810
    Re: How to create Dropdown Menu in css Html.

    @{

    Layout = null;

    }

    <!DOCTYPE html>

    <html>

    <head>

    <title>Forum</title>

    <meta name="viewport" content="width=device-width" />

    <title></title>

    <style>

    .main {

    width: 349px;

    background-color: #E40E0E;

    padding-left: 10px;

    padding-right: 10px;

    }

    .dropbtn {

    background-color: #E40E0E;

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

    }

    .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 .dropbtn {

    background-color: #EA5041;

    }

    </style>

    </head>

    <body>

    <div class="main">

    <div class="dropdown">

    <button class="dropbtn">Master</button>

    <div class="dropdown-content">

    <a href="#">Country Master</a>

    <a href="#">State Master</a>

    <a href="#">City Master</a>

    <a href="#">Subcity Master</a>

    </div>

    </div>

    <div class="dropdown">

    <button class="dropbtn">Transaction</button>

    <div class="dropdown-content">

    <a href="#">Debit Note</a>

    <a href="#">Credit Note</a>

    <a href="#">Payment</a>

    <a href="#">Contra</a>

    </div>

    </div>

    <div class="dropdown">

    <button class="dropbtn">MIS</button>

    <div class="dropdown-content">

    <a href="#">Link 1</a>

    <a href="#">Link 2</a>

    <a href="#">Link 3</a>

    </div>

    </div>

    <div class="dropdown">

    <button class="dropbtn">Report</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>

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!