Hello friends, today in this blog you’ll learn How to Create a Drop Down Menu Using Html & Css . We’ll use Html & Css to create this Drop Down Menu . Earlier I’ve shared a blog on How To Make a Calculator Using Html and Css Only.
If You have any Problem so, I Also Created a full video tutorial on this How to Create a Drop Down Menu Using Html & Css you can see this tutorial .
Video Tutorial of ” Create a Drop Down Menu Using Html & Css “
You might like this:
- How To Create A Website Home Page Using HTML And CSS
- How To Create CSS Background Image Overlay
- Responsive Navigation Bar Design using HTML and CSS
- How To Create Responsive Image Gallery Using Html & Css
Create a Drop Down Menu Using Html & Css [Source Codes]
To create this Drop Down Menu . First, you need to create two files, HTML File and CSS File. After creating these files just paste the following source codes into your files. You can also download the source code files of this Responsive image gallery from the given download button.
# HTML CODE
First, create an HTML file with the name of index.html and paste the given codes in your HTML file.
<html>
<head>
<title>Drop Down Menu</title>
<script src="https://kit.fontawesome.com/e48d166edc.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu-bar">
<ul>
<li> <a href="#"><i class="fa fa-home"></i>Home</a> </li>
<li> <a href="#"><i class="fa fa-user"></i>About</a>
<div class="sub-menu-1">
<ul>
<li><a href="#">Mission</a></li>
<li><a href="#">Vission</a></li>
<li><a href="#">Team</a></li>
</ul>
</div>
</li>
<li> <a href="#"><i class="fa fa-clone"></i>Services</a>
<div class="sub-menu-1">
<ul>
<li><a href="#">Web Design</a></li>
<li class="hover-me"><a href="#">Marketing<i class="fa fa-angle-right"></i></a>
<div class="sub-menu-2">
<ul>
<li><a href="#">SEO</a></li>
<li><a href="#">Social Marketing</a></li>
<li><a href="#">Email Marketing</a></li>
</ul>
</div>
</li>
<li class="hover-me"><a href="#">Mobile App<i class="fa fa-angle-right"></i></a>
<div class="sub-menu-2">
<ul>
<li><a href="#">Android App</a></li>
<li><a href="#">Ios App</a></li>
<li><a href="#">Window App</a></li>
<li><a href="#">Unity App</a></li>
<li><a href="#">Iconic App</a></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li> <a href="#"><i class="fa fa-angellist"></i>Clints</a> </li>
<li> <a href="#"><i class="fa fa-inr"></i>Pricing</a> </li>
<li> <a href="#"><i class="fa fa-edit"></i>Training</a> </li>
<li> <a href="#"><i class="fa fa-phone"></i>Contact</a> </li>
</ul>
</div>
</body>
</html># CSS CODE
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file.
/* COPYRIGHT- CODING WITH NICK*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-image: url("BG.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.menu-bar{
background-color: rgba(0,0,0,0.6);
text-align: center;
}
.menu-bar ul{
display: inline-flex;
list-style: none;
color: azure;
}
.menu-bar ul li{
width: 120px;
margin: 15px;
padding: 15px;
font-size: 18px;
}
.menu-bar ul li a{
color: white;
text-decoration: none;
}
.menu-bar ul li :hover{
color: orange;
border-radius: 3px;
}
.menu-bar .fa{
margin-right: 8px;
}
.sub-menu-1{
display: none;
}
.menu-bar ul li:hover .sub-menu-1{
display: block;
position: absolute;
background: rgba(0,0,0,0.6);
margin-top: 15px;
margin-left: 15px;
}
.menu-bar ul li:hover .sub-menu-1 ul{
display: block;
margin: 10px;
}
.menu-bar ul li:hover .sub-menu-1 ul li{
width: 150px;
padding: 10px;
border-bottom: 1px dotted #fff;
background: transparent;
border-radius: 0;
text-align: left;
}
.menu-bar ul li:hover .sub-menu-1 ul li:last-child{
border-bottom: none
}
.menu-bar ul li:hover .sub-menu-1 ul li a:hover{
color: orange;
}
.fa-angle-right{
float: right;
}
.sub-menu-2{
display: none;
}
.hover-me:hover .sub-menu-2{
position: absolute;
display: block;
margin-top: -40px;
margin-left: 140px;
background-color: rgba(0,0,0,0.6);
}
/* COPYRIGHT- CODING WITH NICK*/That’s all, now you’ve successfully create a Drop Down Menu Using Html & Css . If your code doesn’t work or you’ve faced any error and problem then please download the source code files from the given download button . It’s free and a .zip file will be downloaded then you’ve to extract it.
Read More –
