---
title: "How to create Dropdown Menu in css Html."  
description: "How to create Dropdown Menu in css Html."  
author: "Anonymous User"  
published: 2016-03-02  
updated: 2016-03-02  
canonical: https://www.mindstick.com/forum/34024/how-to-create-dropdown-menu-in-css-html  
category: "css-css3"  
tags: ["html", "css"]  
reading_time: 2 minutes  

---

# How to create Dropdown Menu in css Html.

We want to create [Dropdown Menu](https://www.mindstick.com/forum/158697/how-can-implement-a-dropdown-menu-or-navigation-bar-with-hover-effects-using-jquery) in [css](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem) Html. How to do this Please Help me.

## Replies

### Reply by Anonymous User

```
@{
    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>
```

```

```


---

Original Source: https://www.mindstick.com/forum/34024/how-to-create-dropdown-menu-in-css-html

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
