Learn CSS Drop Down Menu in Urdu & Download The Codes

CSS is a colorful fancy environment for web designers since its released day. However, the latest changes in CSS are so awesome and powerful. Some years back, creating A drop down menu was not possible without jQuery and CSS. CSS used to design the Menu and jQuery used to function the menu. Now it is alone possible with CSS3. So today's I will give you a complete solution of CSS Drop Down Menu for your website or blog. I have given complete HTML and CSS codes for this menu. You can simply copy them and paste into your webpage or website. You can latter on change the design, colors, links according to your needs.

How to Add CSS Menu to a website in Urdu?

If you want to use this drop down menu in blogger blog. then follow these tips:

1. Login to your blogger account
2. Go to Template >> HTML >> Proceed
3. Find this piece of Code ]]></b:skin>
4. Just above/before that code paste below CSS code

#mymenu {
    margin:0;
    width:auto;
 }
  #mymenu ul {
    margin:0;
    padding:0;
    line-height:30px;
 }

  #mymenu li {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
    background:#F512E2;
 }

  #mymenu ul li a {
    text-align:center;
    height:30px;
    width:150px;
    display:block;
    color:#000;
    font-family:"Comic Sans MS", cursive;
    text-decoration:none;
    color:#FFF;
    border:1px solid #FFF;
    text-shadow:1px 1px 1px #000;
 }

  #mymenu ul ul {
    position:absolute;
    visibility:hidden;
    top:32px;
 }

  #mymenu ul li:hover ul {
    visibility:visible;
    z-index:9999;
 }


  /*Menu hover color can be changed*/

  #mymenu li:hover {
   background:#F98A1B;
 }

  /*the color & Background Color of Links within menu*/

  #mymenu ul li:hover ul li a:hover {
    color:#000;
    background:#13B20D;
 }

  /* You can change the color for main menu*/

  #mymenu a:hover {
  color:#000;
 }

 .clearFloat {
    clear:both;
    margin:0;
    padding:0;
 }

 #mymenu ul li {

  display: inline;  

 }  

CSS Custumization

You can do some customization in above CSS as you want, to change the color of a link simply replace any of your choice with blue color code. To change the background of any link replace red color code with yours. To change the background color of a:hover simply replace the green code with your own color. Also you can change the top level menu color by changing Pink code color with your own.

Don't Miss: How to Create A complete website in CSS+HTML

5. Now add an HTML/JavaScript Gadget and paste this code in it.

<div id="mymenu">
  <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="#">Dreamweaver</a></li>
    <li><a href="#">Blogger</a></li>
    <li><a href="#">WordPress</a></li>
  </ul>
  </li>
  </ul>
    <br class="clearFloat" />
 </div>

HTML Customization

You can change the anchor text with your own text and the link sign "#" with your own link address. Also this is a single drop down menu. If you want to make more menus then simply copy the code from <ul> to </ul> and paste it as far as you want. But you should paste the code within <div> tag and before <br class="clearFloat">.

Credit
This CSS menu is very simple to use and if you liked this menu then please share it with everyone and follow us by email. In my coming tutorial I will make video tutorial on this CSS drop down menu in Urdu.

Stay Connected!