Dropdown Menu with HTML and CSS

How to Create Dropdown Menu with HTML and CSS

How to Create Dropdown Menu with HTML and CSS

As you know that I have discussed and shear with you complete HTML and CSS tutorials in Urdu Hindi languages with full video course in free, but today I will shear with you guys that how we can create a dropdown menu using HTML and CSS beautiful and attractive one. Dropdown menu is the menu when user clicks on specific list item and see its more child items. Dropdown menu writing HTML and CSS coding  make user friendly interface and put good impression to user due to this increase in pages viewing and then low bounce rate.

 

Dropdown Menu with HTML and CSS

 

We can create a dropdown menu with JQuery but today class we will learn with CSS.

If you are beginner in web designing then watch my basic tutorials of HTML and CSS and also JQuery tutorials in Urdu.

HTML full videos course Urdu & Hindi

CSS full videos course in Urdu & Hindi

JQuery tutorials in Urdu & Hindi

When we create a menu we use HTML tag called unordered list (<ul>… </ul>) and inside it we take list item (<li>…</li>), list item may be like this as HOME, About US, Products, Contacts us etc..

In this post you can copy my source code about creating a dropdown menu CSS or download I in zip form and then check its result in the browser. When you copy and paste into text editor then make changing in source code as its background color, text color etc.

Creating Dropdown Menu using HTML and CSS in Urdu Video tutorials


Now get source code

<!DOCTYPE html>

<html>

 

<head>

<title>DropDown Menu</title>

<!–Here is CSS style–>

<style>

 

ul {

margin:0;

padding:0;

}

ul li {

list-style:none;

float:left;

width:180px;

display:block;

text-align:center;

color:yellow;

}

 

ul li a{

 

font-family:Cataneo BT;

font-size:25px;

color:yellow;

text-decoration:none;

padding-left:15px;

display:block;

border-right:2px solid green;

background-color:black;

font-family:MS Sans Serif;

height:40px;

padding-top:6px;

}

ul li a:hover{

background-color:white;

color:black;

}

ul li a:active{

 

background-color:black;

color:white;

}

ul li ul {

visibility:hidden;

}

ul li:hover ul li{

visibility:visible;

}

</style>

 

</head>

<body bgcolor=”gray”>

<div>

<ul>

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Services</a>

<ul>

<li><a href=”#”>Website</a></li>

<li><a href=”#”>WordPress</a></li>

<li><a href=”#”>SEO</a></li>

<li><a href=”#”>Blog</a>

</li>

</ul>

</li>

<li><a href=”#”>Products</a>

<ul>

<li><a href=”#”>Thems</a></li>

<li><a href=”#”>Plugins</a></li>

<li><a href=”#”>Templates</a></li>

<li><a href=”#”>Android Apps</a></li>

</ul>

</li>

<li><a href=”#”>About us</a></li>

<li><a href=”#”>Contact us</a></li>

</ul>

</div>

</body>

</html>

So it was my article about that how to create a dropdown menu with HTML and CSS, if you have any question about this topic then please comment me below the box.

Surly you will have learnt from this article so like my Facebook page and subscribe my YouTube channel to get more videos about web designing, development, SEO, Blogging in Urdu Hindi Videos Tutorials.

If you believe that it is best one lesson for web designing student then share with your friends.

Facebook Comments
83Shares

6 Replies to “How to Create Dropdown Menu with HTML and CSS”

Leave a Reply

Your email address will not be published.