Wednesday, 28 December 2016

Html and css drop down menu list

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
=======================

No comments:

Post a Comment