Home / CSS / How to Create 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 with 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 with html and CSS 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

About Faisal zamir

Faisal Zamir is the author of this blog. He is the web designer, web developer, Professional Blogger and SEO expert.

Check Also

how to insert video and audio to website

How to Insert Video Audio in HTML in Urdu Video Tutorials

Complete Guide that How to Insert Video and Audio in HTML Website This is very …

6 comments

  1. Nice article to learn …….

  2. Can you tell me that how to create a attractive button with html and css?

  3. Sir aap ka artical step by step samjhoho

Write a Reply or Comment

Your email address will not be published. Required fields are marked *