Add Drop Down Menu To Blog

ADD DROP DOWN MENU TO BLOG VERY EASILY 

 

WHEN I WAS DESIGNING MY BLOG PAGE THEN I THOUGHT I SHOULD ADD SOME TABS AND SUB TABS BUT I  WAS TOO MUCH DISAPPOINTED WHEN I FOUND NO METHOD OF DOING SO.. THEN I STARTED TO SEARCH ON WEB FOR THIS PURPOSE BUT I FOUND SO MANY METHODS TO DO THIS BUT NONE OF THEM WAS WORKING.. BUT I DID NOT LOSE MY HOPE AND I KEEP ON SEARCHING THEN FINALLY I GOT THE SOLUTION SO I AM SHARING THAT METHOD OF ADDING DROP DOWN MENU WHICH ACTUALLY WORKS AND I HAVE ALSO USED THIS TO ADD DROP DOWN MENU TO THIS BLOG.. JUST DO THESE STEPS AND IF YOU CANNOT UNDERSTAND SOME STEP THEN YOU CAN ASK IT FROM ME AND I WILL TRY MY BEST TO HELP YOU... 

STEP NO 1:

 GO TO THIS LINK PIXOPOINT AND FIRST CHANGE THE VALUES OF FIRST COLUMN BY CHANGING THEM TOP MENUS WILL BE CHANGED. 2ND COLUMN IS FOR SUB MENUS CHANGE THEM AS YOU LIKE. YOU WILL ONLY  NEED TO CHANGE THE COLOR CODES THERE SO YOU CAN GET THEM HERE COLOR CODE .

AFTER CHANGING THEM CLICK ON SUBMIT DESIGN.

FOLLOW SCREEN SHOT.

STEP NO 2:

    AFTER CLICKING ON SUBMIT DESIGN SCROLLING DOWN ON THAT PAGE AND YOU WILL FIND CSS CODE NOW COPY THIS CODE.

FOLLOW SCREEN SHOT.

STEP NO 3:

      NOW YOU GO TO "TEMPLATE" THEN "EDIT HTML"

BUT BEFORE THIS DOWNLOAD BACKUP OF THE TEMPLATE SO THAT YOU CAN RESTORE IT. AFTER CLICKING ON EDIT HTML A NEXT WINDOW WILL OPEN CLICK ON PROCEED THERE.

AFTER THIS PRESS (CTRL+F) AND THEN COPY THIS CODE 

 ]]></b:skin> 

AND PASTE IT THERE.

AFTER DOING THIS PASTE THE CSS CODE JUST ABOVE THIS CODE WHICH YOU COPIED IN THE STEP NO 2. AFTER THIS SAVE THE TEMPLATE

FOLLOW SCREEN SHOT.

STEP NO 4:

NOW WE WILL INSERT HTML CODE FOR THIS FIRST GO TO "LAYOUT" THEN IN LAYOUT AT RIGHT SIDE THERE WILL BE AN OPTION "ADD A GADGET" CLICK ON THIS AND THEN SCROLL DOWN AND FIND "HTML/JAVASCRIPT" CLICK ON THIS AND THEN A PAGE WILL OPEN IN THIS PAGE YOU HAVE TO INSERT THE FOLLOWING CODE BUT FIRST MAKE CHANGES IN IT.

<!--[if lte IE 7]>
<script type="text/javascript" src="http://pixopoint.com/wp-content/plugins/pixopoint-menu/scripts/suckerfish_ie.js"></script>
<![endif]-->
<ul id="suckerfishnav" class="sf-menu">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a>
    <ul>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
    </ul>
  </li>
  <li><a href="#">Link 3</a>
    <ul>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
    </ul>
  </li>
  <li><a href="#">Link 4</a>
    <ul>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
      <li><a href="#">Sub link</a></li>
    </ul>
  </li>
</ul>

______________________

in this code  the "Link" is the head navigation menu, the "Sub link" will be your drop down menu, and "#" will be the link that you will direct the menu to. now you have to make changes in it i-e you have to add links and change the name of these link and sub link.

AFTER MAKING ALL THE CHANGES PASTE THIS CODE IN THE HTML WINDOW  THAT IS THE GADGET WHICH YOU HAVE ADDED AND also at the end of this code write this tag

<br>

paste it almost 4 or 5 times and after this

 PRESS OK.

STEP NO 5:

 Now our most of work is completed but you will notice something wrong with the drop down menu. You will see that your drop down menus either go behind your posts or that you can't hover down with your mouse, and there's a really simple fix to this problem. now again  Go to TEMPLATE then  HTML edit it and then press "ctrl+f" and paste this code there

position:absolute;

just after this code write 

z-index:100;

donot give space

it will look like this

position:absolute;z-index:100;

After this save the template now you can view your blog and every thing will be ok. if you have trouble in understanding something just leave a comment and i will help you out...