google() // Google's Maven repository How to Create a Drop Down Menu Using Html and Css ~ CODING AND TIPS

How to Create a Drop Down Menu Using Html and Css

1 comment

      How to Create a Drop Down Menu Using Html and CSS

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 Search: Create a Drop Down Menu Using Html & CSS [Source Codes] by #YouTube 
able able video . 
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. 
                                            #DOWNLOAD


<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>

OR Billow Download link Full Secure Code
First, create an HTML file with the name of index.html and paste the given codes in your HTML file.
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file.

That’s all, now you’ve successfully create a Drop Down Menu Using #Html_and_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 Read button . It’s free and a .web link will be more read then you’ve to extra learn it.

1 comments:

nice download drop down menu. good. very help full site.

back to top