CSS is one of our Favourite activities we are doing and researching these days. Our team is putting extra efforts to come up with useful tutorials of CSS for its readers. 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 a time to time I taught you CSS from basic to Advance level. However, now it is time to take our web designing expertise to the next level and make some real projects. Keeping that in mind, we have recorded the most awaiting tutorial for my readers. This tutorial is all about creating A CSS drop down menu in Urdu language. So we have used pure CSS3 while creating this cute CSS Menu. No image is used and no script is used.
How to Create CSS3 Drop Down Menu in Urdu & Hindi?
Now here is the source code for this drop-down menu which was created in video tutorials:
<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 us 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?
