Skip to main content

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.


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:

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.

Comments

Popular posts from this blog

C++ Programming Tutorial - How to Install Code::Blocks in Ubuntu Linux - Learn Online

Installing Code::Blocks How do I Install Code::Blocks HOWTO: Installing Code::Blocks 10.05 How do you install Irrlicht on Code::Blocks? How do you install CodeBlock on ubuntu? codeblocks /bin/sh: g++: not found Installing codeblocks on ubuntu Installing Code::Blocks on Ubuntu 10.04?

Eyeglasses and Lenses Prescription WooCommerce Wordpress Best Plugin

WooCommerce EYE Glasses and Lenses Prescription Wordpress Plugin builds your Eye Glasses and Lenses Website quickly and easily. It is powered by WooCommerce and it is fully automated so you don’t need to do anything. It features popular Presciption, Select Lenses and their Addons. You can also easily increase your sale by adding your this plugin. prescription glasses is the best plugin for your wordpress website. its Tested in All major Themeforest Wordpress & WooCommerce theme, Features Suits on every type of Eyeglasses and Lenses prescription Have multiple lens options  Compatible with Wordpress & WooCommerce  Anti Reflective Option  Sphere Select Option  Cylinder Select Option  Axis Select Option  Add Select Option  Pupils Distance Select Option Download

Google Fight Against Low Quality and Spammy Content

  Google's ongoing battle against spammy and low-quality content in search results is an essential aspect of maintaining the platform's credibility and usefulness. Here are some of the new strategies and policies Google is implementing to combat these issues: Improved Quality Ranking : Google is enhancing its core ranking algorithms to prioritize high-quality and original content while reducing the visibility of unoriginal or spammy content in search results. New Spam Policies : Google is updating its spam policies to address emerging tactics used by spammers. This includes targeting practices such as expired websites repurposed as spam repositories, obituary spam, and other manipulative behaviors. Reducing Unoriginal Results : Google is refining its ranking systems to identify and minimize unhelpful, unoriginal content. This includes pages created specifically to match certain search queries and content that prioritizes search engine optimization over user experience. Scaled C