Html:
============================
<div class="ddropdown">
<button class="ddropbtn">Dropdown</button>
<div class="ddropdown-content">
<a href="javascript:void(0)">level1</a>
<a href="javascript:void(0)">level2</a>
<a href="javascript:void(0)">level3</a>
<a href="javascript:void(0)">level4</a>
</div>
</div>
============================
Css:
===========================
<style>
.ddropbtn {
background-color: #505050;
color: white;
font-size: 15px;
border: none;
cursor: pointer;
display: inline-block;
padding: 0px 24.3px;
border-radius: 0 0 3px 3px;
}
.ddropdown {
position: relative;
display: inline-block;
}
.ddropdown-content {
display: none;
top: 26px;
position: absolute;
background-color: #babfd3;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index:999;
}
.ddropdown-content a {
color: white;
text-align: right;
padding-bottom: 2px;
text-decoration: none;
display: block;
background-color: #babfd3;
border-bottom: 1px solid #eaeaf1;
}
.ddropdown-content a:hover {background-color: #3a3f9a}
.ddropdown:hover .ddropdown-content {
display: block;
}
.ddropdown:hover .ddropbtn {
background-color: #3a3f9a;
}
</style
=======================
============================
<div class="ddropdown">
<button class="ddropbtn">Dropdown</button>
<div class="ddropdown-content">
<a href="javascript:void(0)">level1</a>
<a href="javascript:void(0)">level2</a>
<a href="javascript:void(0)">level3</a>
<a href="javascript:void(0)">level4</a>
</div>
</div>
============================
Css:
===========================
<style>
.ddropbtn {
background-color: #505050;
color: white;
font-size: 15px;
border: none;
cursor: pointer;
display: inline-block;
padding: 0px 24.3px;
border-radius: 0 0 3px 3px;
}
.ddropdown {
position: relative;
display: inline-block;
}
.ddropdown-content {
display: none;
top: 26px;
position: absolute;
background-color: #babfd3;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index:999;
}
.ddropdown-content a {
color: white;
text-align: right;
padding-bottom: 2px;
text-decoration: none;
display: block;
background-color: #babfd3;
border-bottom: 1px solid #eaeaf1;
}
.ddropdown-content a:hover {background-color: #3a3f9a}
.ddropdown:hover .ddropdown-content {
display: block;
}
.ddropdown:hover .ddropbtn {
background-color: #3a3f9a;
}
</style
=======================