How to create Dropdown Menu in css Html.

Anonymous User 1997 02 Mar 2016

We want to create Dropdown Menu in css Html. How to do this Please Help me.

Anonymous User

Other

I am a content writter !

1 Answers

Anonymous User 02 Mar 2016

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

forum

How to create Dropdown Menu in css Html.

Can you answer this question?

1 Answers