Hello everyone, you can learn how to create a Drop Down Menu using HTML and CSS in this blog. So if you want to learn then follow all the steps carefully.
Watch Full Tutorial on YouTube
Source Code Of Drop Down Menu
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code in this file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>DropDown Menu</title>
</head>
<body>
<div class="container">
<nav class="navbar">
<div class="logo">
<p>Coding Power</p>
</div>
<div class="links">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul class="sub-menu-1">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a>
<ul class="sub-menu-2">
<li><a href="#">Angular JS</a></li>
<li><a href="#">React JS</a></li>
<li><a href="#">Vue JS</a></li>
</ul></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Python</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul class="sub-menu-1">
<li><a href="#">Web Development</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Hosting</a>
<ul class="sub-menu-2">
<li><a href="#">Hostinger</a></li>
<li><a href="#">Bluehost</a></li>
<li><a href="#">SiteGround</a></li>
<li><a href="#">A2 Hosting</a></li>
</ul></li></li>
</ul></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</div>
</body>
</html>
Step 2: Create style.css File
Create one file with the name style.css and paste the below code in this file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: black;
}
.container{
font-family: Arial, Helvetica, sans-serif;
}
.container::before{
content: "";
background: url(bg.jpg) no-repeat center center/cover;
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0.5;
}
.container .navbar{
height: 70px;
background-color: #333;
display: flex;
}
.container .navbar .logo{
width: 200px;
margin: auto 0;
text-align: center;
margin-right: 30px;
}
.container .navbar .logo p{
font-size: 25px;
padding: 13px;
display: block;
color: white;
}
.container .navbar .links .menu{
display: flex;
height: 100%;
}
.container .navbar .links .menu li{
margin: auto 0;
width: 100px;
padding: 10px;
list-style: none;
text-align: center;
position: relative;
}
.container .navbar .links .menu li:hover,
.container .navbar .links .menu li:hover .sub-menu-1 li:hover{
background-color: tomato;
}
.container .navbar .links .menu li a{
text-decoration: none;
color: white;
font-size: 18px;
}
.container .navbar .links .menu li .sub-menu-1{
display: none;
position: absolute;
top: 42px;
left: 0;
}
.container .navbar .links .menu li:hover .sub-menu-1{
display: block;
}
.container .navbar .links .menu li .sub-menu-1 li{
width: 200px;
height: 45px;
text-align: center;
background: #333;
padding: 12px;
position: relative;
}
.container .navbar .links .menu li .sub-menu-1 li .sub-menu-2{
display: none;
position: absolute;
left: 200px;
top: 0;
}
.container .navbar .links .menu li:hover .sub-menu-1 li:hover .sub-menu-2{
display: block;
}
.container .navbar .links .menu li .sub-menu-1 li .sub-menu-2 li{
width: 180px;
text-align: center;
background: #333;
padding: 12px;
}That’s It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.
For Download Code You have to wait 30 seconds.
