CSS dropdown button , HTML dropdown button

Dropdowns are always been attractive. The problem beginners face is that they can not make nice effects using css and try to copy paste.But after reading this you will be able to do it.

Consider the example View example

The above example can be achieved using the source code

CSS

.dropdown {
    margin:0;
    margin-left:auto;
    margin-right:auto;
    position: relative;
    display: inline-block;
    background:green;
    color:#fff;
    width:160px;
    height:40px;
    text-align:center;
    line-height:40px;
    font-size:30px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: steelblue;
    min-width: 160px;
    color:#fff;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding:5px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

And the HTML structure looks like

HTML

<div  class="dropdown">
  <span>Hover me!</span>
  <div class="dropdown-content">
    <ul style="list-style-type:none;">
     <li>link 1</li>
     <li>link 2</li>
     <li>link 3</li>
    </ul>
  </div>
</div>

Understanding
There is no much logic here to create a dropdown button , Just you need to understand is the position properties. The parent element .dropdown has been given relative value in position property and the , .dropdown-content has been given absolute value in position and the display property initially has been set to 'none' , and when hovered over .dropdown element the "display" property of .dropdown-content has been set to block to display the content.