Wednesday , August 16 2017
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 HTML and CSS tutorials in Urdu Hindi with full video course in free, but today I will shear with you guys that how we create a dropdown menu with HTML and CSS beautify 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.

Source code for Dropdown menu

 

<!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
Hi Friends! My name is Faisal Zamir, I am web designer, SEO expert, professional Blogger designer, and I have been working since 2015, in short period I got treasure of knowledge relative to web technology. I have many tutorials in Urdu-Hindi, so I can solve your problems relative to web designing, SEO, Make money, and about more much.

Check Also

CSS Tutorials Urdu Hindi

CSS Tutorials in Urdu-Hindi (Complete Videos)

CSS Tutorials in Urdu-Hindi (web designing) web designing in Urdu tutorials or available in the market but i …

3 comments

  1. Nice article to learn …….

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

Write a Reply or Comment

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