Vertical CSS Multi Drop Down Menu for Blogger


                                                                  
                                    Before Click                                                  After Click

I am going to tell you how to add a beautiful and Professional look Drop Down Menu any Site or Blog,
  • Login to Blogger  >> Click on drop down menu >>then select "Template".
  • Now you will see  "EDIT HTML" Button ,Click on it >>  and then click Proceed button .
  • Now find this tag ]]></b:skin> by using CTRL + F 
  • Paste below code Just Before/above ]]></b:skin> tag  and Save the Template.

#TWnav {width:504px; height:510px; position:relative; background:url(red_frog.jpg) no-repeat 0px 160px;}
#TWnav h1 {font-size:40px; color:#d30;}
#TWnav #content {clear:left; position:absolute; left:230px; top:10px; width:250px; z-index:10;}
#TWmenu {list-style-type:none; padding:0; margin:0; width:125px; position:absolute; top:70px; left:0; border:1px solid #fff; border-width:0 1px 1px; z-index:100;}
#TWmenu ul {list-style-type:none; padding:0; margin:0;}
#TWmenu li {float:left; background:#657; position:relative; border-top:1px solid #fff;}
#TWmenu li.sub {background:#d30;}
#TWmenu li, #TWmenu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:125px; text-decoration:none;  cursor:pointer; font-weight:bold; text-indent:5px;}

#TWmenu ul,
#TWmenu li:hover ul ul,
#TWmenu li:hover ul li:hover ul ul {display:none;}
#TWmenu li:hover {color:#ff0; z-index:500;}
#TWmenu li:hover ul {display:block; height:150px;}
#TWmenu li:hover ul li:hover ul,
#TWmenu li:hover ul li:hover ul li:hover ul {display:block; position:absolute; left:110px; top:-1px; border:1px solid #fff; border-width:0 1px 1px; height:auto;}
#TWmenu li:hover ul li.fly {background: #657 url(frog_arrow.gif) no-repeat top right;}
#TWmenu li:hover ul li:hover {background:#98a;}
#TWmenu li:hover ul li:hover ul li {background:#c60;}
#TWmenu li:hover ul li:hover ul li.hover ul li {background:#780; z-index:500;}
#TWmenu li:hover ul li:hover ul li.fly {background: #c60 url(frog_arrow.gif) no-repeat top right;}
#TWmenu li:hover ul li:hover ul li:hover {z-index:500; background:#fa4;}
#TWmenu li:hover ul li:hover ul li:hover a {color:#000;}
#TWmenu li:hover ul li:hover ul li:hover ul li:hover {background:#aa0;}
#TWmenu li:hover ul li:hover ul li.hover ul li:hover a {color:#fff;}
#TWnav img {display:block; float:right;}
#TWnav p {margin:0px; padding:17px 0 0 0; color:#000; font-size:12px; font-family:arial, sans-serif; text-align:justify;}




Now we can  use below code to add menu any where we want. you can add it as HTML WIDGET in blogger layout

  • Login to Blogger  >> Click on drop down >> Now select "Layout"
  • Now you will see "Add a Gadget" button click any of them
  • A new window will open .Scroll some down until you see " HTML/JavaScript" Button.
  • Click on " HTML/JavaScript" Button ,leave the Title blank and Put the below code in Content and then after click on save button.

<div id="TWnav">
<ul id="TWmenu">
<li class="sub">Modernhackerss
<ul>
<li><a href="http://modernhackerss.blogspot.com">Tricks</a></li>
<li><a href="http://modernhackerss.blogspot.com">Hacks</a></li>
<li><a href="http://modernhackerss.blogspot.com">PHP</a></li>
<li class="fly"><a href="http://modernhackerss.blogspot.com">C++</a>
<ul>
<li><a href="http://modernhackerss.blogspot.com">Auto CAD</a></li>
<li class="fly"><a href="http://modernhackerss.blogspot.com">Facebook</a>
<ul>
<li><a href="http://modernhackerss.blogspot.com">Auto like</a></li>
<li><a href="http://modernhackerss.blogspot.com">Make Money</a></li>
<li><a href="http://modernhackerss.blogspot.com">Xp Tricks</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://modernhackerss.blogspot.com">win 8</a></li>
<li><a href="http://modernhackerss.blogspot.com">Any HElp</a></li>
</ul>
</li>
<li class="sub">Classifications
<ul>
<li class="fly"><a href="http://modernhackerss.blogspot.com">Pelodryadinae</a>
<ul>
<li><a href="http://modernhackerss.blogspot.com">Cyclorana</a></li>
<li><a href="http://modernhackerss.blogspot.com">Litoria</a></li>
<li><a href="http://modernhackerss.blogspot.com">Nyctimystes</a></li>
</ul>
</li>
<li class="fly"><a href="http://egytricks.com">Phyllomedusinae</a>
<ul>
<li><a href="http://modernhackerss.blogspot.com">Agalychnis</a></li>
<li><a href="http://modernhackerss.blogspot.com">Cruziohyla</a></li>
<li><a href="http://modernhackerss.blogspot.com">Hylomantis</a></li>
<li><a href="http://modernhackerss.blogspot.com">Pachymedusa</a></li>
<li><a href="http://modernhackerss.blogspot.com">Phasmahyla</a></li>
<li><a href="http://modernhackerss.blogspot.com">Phrynomedusa</a></li>
<li><a href="http://modernhackerss.blogspot.com">Phyllomedusa</a></li>
</ul>
</li>
<li class="fly"><a href="http://modernhackerss.blogspot.com">Hemiphractinae</a>
<ul>
<li><a href="http://modernhackerss.blogspot.com">Cryptobatrachus</a></li>
<li><a href="http://modernhackerss.blogspot.com">Flectonotus</a></li>
<li><a href="http://modernhackerss.blogspot.com">Gastrotheca</a></li>
<li><a href="http://modernhackerss.blogspot.com">Hemiphractus</a></li>
<li><a href="http://modernhackerss.blogspot.com">Stefania</a></li>
</ul>
</li>
<li class="fly"><a href="http://modernhackerss.blogspot.com">Hylinae</a>
<ul>
<li><a href="http://modernhackerss.blogspot.com">Acris</a></li>
<li><a href="http://modernhackerss.blogspot.com">Anotheca</a></li>
<li><a href="http://modernhackerss.blogspot.com">Bokermannohyla</a></li>
<li><a href="http://modernhackerss.blogspot.com">Corythomantis</a></li>
<li><a href="http://modernhackerss.blogspot.com">Ecnomiohyla</a></li>
<li><a href="http://modernhackerss.blogspot.com">Hyloscirtus</a></li>
<li><a href="http://modernhackerss.blogspot.com">Megastomatohyla</a></li>
<li><a href="http://modernhackerss.blogspot.com">Osteocephalus</a></li>
<li><a href="http://modernhackerss.blogspot.com">Pseudacris</a></li>
<li><a href="http://modernhackerss.blogspot.com">Sphaenorhynchus</a></li>
<li><a href="http://modernhackerss.blogspot.com">Trachycephalus</a></li>
</ul>   
</li>
<li class="fly"><a href="http://modernhackerss.blogspot.com">Rhacophorinae</a>
<ul>
<li><a href="http://modernhackerss.blogspot.com">Boophis</a></li>
<li><a href="http://modernhackerss.blogspot.com">Callixalus</a></li>
<li><a href="http://modernhackerss.blogspot.com">Chiromantis</a></li>
<li><a href="http://modernhackerss.blogspot.com">Cryptothylax</a></li>
<li><a href="http://modernhackerss.blogspot.com">Mantidactylus</a></li>
<li><a href="http://modernhackerss.blogspot.com">Rhacophorus</a></li>
</ul>
</li>
<li class="fly"><a href="http://modernhackerss.blogspot.com">Buergeriinae</a>
<ul>
<li><a href="http://modernhackerss.blogspot.com">Buergeria</a></li>
</ul>
</li>
</ul>
</li>
<li class="sub">References
<ul>
<li><a href="http://egytricks.com">Wikipedia</a></li>
<li><a href="http://egytricks.com">Encyclopedia</a></li>
</ul>
</li>
<li class="sub">Links
<ul>
<li><a href="http://modernhackerss.blogspot.com">Complete treefrog</a></li>
<li><a href="http://modernhackerss.blogspot.com">Old World treefrogs</a></li>
<li><a href="http://modernhackerss.blogspot.com">Amphibian Species</a></li>
</ul>
</li>
</ul>
</div>

For Any Help Please Post Your Comments Here...
Posted by
Labels: