Simple dropdown using CSS

We all know dropdowns are very much useful specially in our menu , dropdowns made our navigation more convenient for our visitors and can carry a lot of information without taking too much space.

In this post we are going to discuss how we can create a simple dropdown using CSS. So lets start our tutorial without wasting much time.

First of all our HTML part which contains a dropdown using UL and LI tags.

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown</a>
    <div class="dd-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

Here is our CSS part which made a very simple and good looking dropdown.

ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;}
li {float: left;}
li a, .dropbtn {display: inline-block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}
li a:hover, .dropdown:hover .dropbtn {background-color: red;}
li.dropdown {display: inline-block;}
.dd-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;}
.dd-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;text-align: left;}
.dd-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dd-content {display: block;}