CSS Dropdown – Simple Dropdown Using CSS

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;}
If you are a book reader and want a good book on HTML / CSS ? This here is a book in Amazon
Hope this tutorial helps our reader.
Are you interested in more CSS tutorial ?
Great 👍