How to Create CSS3 Drop Down Menu in Urdu & Hindi?



CSS is one of my Favourite activities I am doing and researching these days. CSS3 has more powers to use and to interact with static web pages. Now creating a professional looking website without using CSS is just a dream. So, we have been learning CSS on this blog since its creation. And time to time I taught you CSS from basic to Advance level. However, now it is the time to take our web designing expertise to the next level and make some real projects. Having kept that in mind, I have recorded the most awaiting tutorial for my readers. This tutorial is all about creating A CSS drop down menu in Urdu language. So I have used pure CSS3 while creating this cute CSS Menu. No image is used and no script is used.

CSS drop down menus

How to Create CSS Drop Down menu in Urdu?

This is not so difficult, you need just to do some practice on basics of CSS. Below video tutorials which are in Urdu language will show you how to create drop down menu in CSS. These tutorials are taking your CSS skills to the next level.

The Source code of this tutorials is also available below the video tutorials, and the menu will be looking like this image:

CSS Drop Down menu

Watch Part 1 first and then Part 2.

CSS Drop Down menu Part 1

CSS Drop Down menu Part 2
Now here is the source code for this drop down menu which was created in video tuotirals:

<html>
<head>
<style type=”text/css”>
.menubar {padding:0px;}
.menubar ul {padding:0px; margin:0px; line-height:30px;}
.menubar li {background-color:teal; list-style:none; float:left; position:relative;}
.menubar a {width:120px; height:30px; display:block; text-decoration:none; color:white; border:1px solid white; text-align:center; text-shadow:1px 1px 1px orange;}
.menubar ul ul {position:absolute; top:33px; visibility:hidden;}
.menubar ul li:hover ul {visibility:visible;}
.menubar a:hover {background-color:brown;}
.menubar ul li:hover ul li a:hover {background-color:blue;}
.menubar ul li {display:inline;}
.clear {
clear:both;
margin:0;
padding:0;
}
.menubar ul ul ul {margin-left:120px; margin-top:-30px; padding-left:5px;}
.menubar ul ul ul li {visibility:hidden;}
.menubar ul li:hover ul ul ul{visibility:visible;}
</style>
</head>
<body>
<div class=”menubar”>
<ul>
<li><a href=”#”>Web Designing</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>JavaScript</a></li>
<li><a href=”#”>Dream Weaver >></a>
<ul>
<li><a href=”#”>Basic</a></li>
<li><a href=”#”>Basic</a></li>
<li><a href=”#”>Basic</a></li>
<li><a href=”#”>Basic</a></li>
<li><a href=”#”>Basic</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href=”#”>Web Designing</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>JavaScript</a></li>
<li><a href=”#”>Dream Weaver</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href=”#”>Web Designing</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>JavaScript</a></li>
<li><a href=”#”>Dream Weaver</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href=”#”>Web Designing</a>
<ul>
<li><a href=”#”>HTML</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>JavaScript</a></li>
<li><a href=”#”>Dream Weaver</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

You can simply copy the code and insert into a blank notepad file and save it with HTML extension, and view the file in your browser, so you’ll be able to see a beautiful drop down menu as showing in a picture above.

Let me know how was this menu and did you learn it completely or not? and what do you want to learn more in the future about web designing. Stay Tuned and Sharing is caring.

About Abdul Wali

Abdul Wali is a Web Developer, SEO Consultant and Online Instructor working online for last 6 years on the internet and managing several successful websites. You can contact him via Email or follow him on Facebook. Also add him on .

Check Also

FileZilla FTP in Urdu

How to Upload HTML website to Online Server in Urdu

Few days back, we learnt creating a complete website layout by using HTML and CSS. …

  • Thanks this site blogger for sharing it. Great and nice article post.

  • Nice Drop down menu. Thanks For Sharing…

  • Assalamu Alaikum

    sir ap k tutorial say mjay bohat faida hoa hai aor main ap ka bohat mashkoor hon k ap nay pakistani awan k liey itna kuch kr rhay hain. sir maira problem ye hai k jub main drop down menu baar bana laita hon us k baad main usay explorer main open krta hon problem ye araha hain k jb main apni site ko kum resolution walay pc ya clrl ko press kiye hoe mouse ki madad say resolution ko chota ya barra krta hon tou drop down menu baar idar udar bikhar jata hai plz help
    thanks
    Regards:
    Danish Riaz
    0334-9529072

  • TaLaT ALi

    Danish i agree with you…nd Sir ap 3sra Tutorial kb add karengy..??