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>




<title>DropDown Menu</title>

<!–Here is CSS style–>



ul {




ul li {









ul li a{


font-family:Cataneo BT;






border-right:2px solid green;


font-family:MS Sans Serif;




ul li a:hover{




ul li a:active{





ul li ul {



ul li:hover ul li{






<body bgcolor=”gray”>



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

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


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

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

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

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




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


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



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

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







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

Faisal zamir

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

You may also like...

6 Responses

  1. Younis says:

    Nice article to learn …….

  2. Syed Ali says:

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

  3. Navin says:

    Sir aap ka artical step by step samjhoho

Leave a Reply

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