Home > DeveloperSection > Forums > How to create Dropdown Menu in css Html.
Ankit Singh

Total Post:341

Points:2389
Posted on    March-02-2016 10:05 PM

 CSS-CSS3 HTML  CSS 
Ratings:


 1 Reply(s)
 323  View(s)
Rate this:
We want to  create Dropdown Menu in css Html. How to do this Please Help me.


aditya kumar Patel

Total Post:250

Points:1782
Posted on    March-02-2016 10:07 PM

@{

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>


Don't want to miss updates? Please click the below button!

Follow MindStick