Add css Dropdown navigation menu in blogger. ~ Blogger Tips And Tools |Latest Blogger Tricks| SEO Tips

Hi now add this special css drop down navigation menu in blogger by this easily way.
PREVIEW:-

Follow simple and easy step to adding this special menu in your blogger ---->>>>

* First go to your blogger Dashboard .

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger Template.

* Now find this code ]]</b:skin> by CTRL+F key.

* Copy below code and paste before ]]</b:skin>

#placemainmenu {
width : 968px;
height : 51px;
margin : 9px 0 0 11px;
background : url(http://santabanta.mywapblog.com/files/mainmenu.png) no-repeat;
}
.ui-tabs-hide {
display : none;
}
#mainmenu li:hover a, #mainmenu li:hover a:link, #mainmenu li:hover a:visited, #mainmenu li.active a, #mainmenu li.active a:link, #mainmenu li.active a:visited {
background : url(http://santabanta.mywapblog.com/files/menu-hover.png) repeat-x;
color : #fff;
text-decoration : none;
}
#placemainmenu ul li .dropdown1 {
position : absolute;
z-index : 500;
display : none;
width : 228px;
margin : 29px 0 0 0;
left : -16px;
padding : 0;
}
#placemainmenu ul li .dropdown1 .dropdowntop {
width : 228px;
height : 30px;
background : url(http://santabanta.mywapblog.com/files/dropdown-top1.png) no-repeat;
}
#placemainmenu ul li .dropdown1 .dropdownbottom {
width : 228px;
background : url(http://santabanta.mywapblog.com/files/dropdown-bottom1.png) no-repeat 0% 100%;
padding : 0 0 30px 0;
}
#placemainmenu #mainmenu li:hover a.linkdropbig, #placemainmenu #mainmenu li:hover a.linkdropbig:link, #placemainmenu #mainmenu li:hover a.linkdropbig:visited {
float : left;
width : 287px;
height : 20px;
border-bottom : 1px solid #e3e3e3;
background : none;
color : #494949;
font-size : 1.2em;
font-weight : bold;
padding : 0 0 0 5px;
margin : 0 0 0 29px;
}
#placemainmenu #mainmenu li:hover a.linkdropbig:hover {
text-decoration : underline;
}
#placemainmenu ul li .dropdown1 ul.menudrop1 {
width : 170px;
margin : 0 0 0 29px;
}
#placemainmenu ul li .dropdown1 ul.menudrop1 li {
width : 170px;
height : 29px;
background : none;
padding : 0;
margin : 0;
display : inline;
float : left;
border-bottom : 1px solid #ededed;
}
#placemainmenu #mainmenu li:hover ul.menudrop1 a, #placemainmenu #mainmenu li:hover ul.menudrop1 a:link, #placemainmenu #mainmenu li:hover ul.menudrop1 a:visited {
color : #818181;
font-size : 1.1em;
text-transform : none;
margin : 0;
background : none;
display : inline;
float : left;
height : 21px;
width : 160px;
padding : 8px 5px 0 5px;
}
#placemainmenu #mainmenu li:hover ul li:hover a:hover, #placemainmenu #mainmenu li ul li:hover a:hover, #placemainmenu #mainmenu li:hover ul li:hover a {
text-decoration : none;
color : #fff;
background : #4a4a4a;
}
div#placemainmenu li:hover .dropdown1, div#placemainmenu li li:hover .dropdown1 {
display : none;
}
div#placemainmenu li:hover .dropdown1, div#placemainmenu li li:hover .dropdown1 {
display : block;
cursor : pointer;
}

* Now click to save your blogger Template.

* Now again go to your blogger Dashboard and click in design tab.

* Now you are here--->>> Page Element.

* Click in Add Gadget which is below your blogger Header.

* When open new window click in HTML/javascript from list.

* When open new blank box copy below code and paste in blank box.

<div id="placemainmenu">
 <ul id="mainmenu">

  <li><a href="YOUR HOMEPAGE URL">Home</a></li>
  <li><a href="URL HERE">TAB1 TILTE</a>
   <div class="dropdown1">
    <div class="dropdowntop"></div>
    <div class="dropdownbottom">
     <ul class="menudrop1">
      <li><a href="URL HERE">SUB TAB1 TILTE</a></li>

      <li><a href="URL HERE">SUB TAB2 TILTE</a></li>
      <li><a href="URL HERE">SUB TAB3 TILTE</a></li>
      <li><a href="URL HERE">SUB TAB4 TILTE</a></li>
      <li><a href="URL HERE">SUB TAB5 TILTE</a></li>
      <li><a href="URL HERE">SUB TAB6 TILTE</a></li>
      <li><a href="URL HERE/">SUB TAB7 TILTE</a></li>

      <li><a href="URL HERE">SUB TAB8 TILTE</a></li>
     </ul>
     <div class="clear"></div>
    </div>
   </div>
  </li>
  <li><a href="URL HERE">TAB2 TITLE HERE</a>
   <div class="dropdown1">

    <div class="dropdowntop"></div>
    <div class="dropdownbottom">
     <ul class="menudrop1">
      <li><a href="URL HERE">SUB TAB1 TITLE HERE</a></li>
      <li><a href="URL HERE">SUB TAB2 TITLE HERE</a></li>
      <li><a href="URL HERE">SUB TAB3 TITLE HERE</a></li>
      <li><a href="URL HERE">SUB TAB4 TITLE HERE</a></li>

      <li><a href="URL HERE">SUB TAB5 TITLE HERE</a></li>
     </ul>
     <div class="clear"></div>
    </div>
   </div></li>
  <li><a href="URL HERE">TAB 3 TITLE HERE</a><div class="dropdown1">
    <div class="dropdowntop"></div>
    <div class="dropdownbottom">

     <ul class="menudrop1">
      <li><a href="URL HERE/">SUB TAB 1 TITLE HERE</a></li>
      <li><a href="URL HERE">SUB TAB 2 TITLE HERE</a></li>
      <li><a href="URL HERE">SUB TAB 3 TITLE HERE</a></li>
      <li><a href="URL HERE">SUB TAB 4 TITLE HERE</a></li>
      <li><a href="URL HERE">SUB TAB 5 TITLE HERE</a></li>

      <li><a href="URL HERE">SUB TAB 6 TITLE HERE</a></li>
     </ul>
     <div class="clear"></div>
    </div>
   </div>
  </li>
  <li><a href="URL HERE">TAB 4 TITLE HERE</a>
   <div class="dropdown1">

    <div class="dropdowntop"></div>
    <div class="dropdownbottom">
     <ul class="menudrop1">
      <li><a href="URL HERE/">SUB TAB 1 TITLE HERE</a></li>
      <li><a href="URL HERE">SUB TAB 2 TITLE HERE</a></li>
      <li><a href="URL HERE">SUB TAB 3 TITLE HERE</a></li>
      <li><a href="URL HERE">SUB TAB 4 TITLE HERE</a></li>

      <li><a href="URL HERE">SUB TAB 5 TITLE HERE</a></li>
     </ul>
     <div class="clear"></div>
    </div>
   </div></li>
  <li><a href="URL HERE">TAB 5 TITLE HERE</a></li>
  <li><a href="URL HERE">TAB 6 TITLE HERE</a></li>


 </ul>
</div>