In this post, we will learn how to create a dropdown menu using CSS. For this we will simply use CSS. We don't have require JavaScript. So how we can do this, we will learn in this post. So read this post till the end.


How To Create A Dropdown Menu Using CSS ?


Create A Dropdown Menu Using CSS

To create a dropdown menu using CSS, we use :hover pseudo class. How can we use this class to create a dropdown menu, we will look further. 


We follow the following steps to create a dropdown menu:


Step 1: In this step we write HTML code for dropdown menu.


<!DOCTYPE html>
<html><head>

<title>How To Create A Dropdown Menu Using CSS ?</title>

<style>
/* Style code for dropdown menu here */
</style>

</head>
<body>

<div class="navigation">

<a href="#">Home</a>

<a href="#">News</a>

<div class="dropdown">

<button class="dropbtn">Tutorials &#9660; </button>

<div class="dropdownmenus">

<a href="#">HTML</a>

<a href="#">CSS</a>

<a href="#">JavaScript</a>

</div>

</div>

</div>

</body>
</html> code-box

Step 2: In this step we write CSS for dropdown menu.


/* style .navigation div */
.navigation {
display: flex;
flex-flow: row wrap;
background-color: #000;
}

/* style .navigation links class */
.navigation a {
color: #fff;
text-decoration: none;
font-size: 16px;
margin-right: 5px;
padding: 10px 14px;
}

/* style dropdown button */
.dropbtn {
background-color: #000;
color: #fff;
border: none;
outline: none;
font-size: 16px;
padding: 10px 14px;
}

/* background color change when mouse hover on link and button */
.navigation a:hover, .dropbtn:hover {
background-color: red;
}

/* style dropdown menus and display none by default */
.dropdownmenus {
display: none;
position: absolute;
z-index: 1;
background-color: #000;
min-width: 150px;
}

/* style dropdown menus links */
.dropdownmenus a {
display: block;
margin: 0px;
}

/* show dropdown menu when mouse hover on .dropdown div */
.dropdown:hover .dropdownmenus {
display: block;
} code-box


So put this above CSS code in Step 1 HTML code. After this our dropdown menu will be ready.


Summary

In this post we learned how to create a dropdown menu using CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post