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.
.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; }
<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>
Comments
Post a Comment