Red Vertical CSS Multi Drop Down Menu for Blogger

This is a Red Vertical CSS Multi Drop Down Menu for Blogger.In this Post I am going to tell you how to add a beautiful and Professional look Drop Down Menu any Site or Blog,

CSS EFFECT..

Now First we will add the CSS Code in Blogger Template ..  so follow my Simple below Instruction..

• 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;}

MENU CODE

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">Types
<ul>
<li><a href="http://egytricks.com/">European</a></li>
<li><a href="http://egytricks.com/">Indian</a></li>
<li><a href="http://egytricks.com/">North Africa</a></li>
<li class="fly"><a href="http://egytricks.com/">American</a>
<ul>
<li><a href="http://egytricks.com/">South American</a></li>
<li class="fly"><a href="http://egytricks.com/">North American</a>
<ul>
<li><a href="http://egytricks.com/">Grey tree frog</a></li>
<li><a href="http://egytricks.com/">Green tree frog</a></li>
<li><a href="http://egytricks.com/">Spring peeper</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://egytricks.com/">Japanese</a></li>
<li><a href="http://egytricks.com/">Chinese</a></li>
</ul>
</li>
<li class="sub">Classifications
<ul>
<li class="fly"><a href="http://egytricks.com/">Pelodryadinae</a>
<ul>
<li><a href="http://egytricks.com/">Cyclorana</a></li>
<li><a href="http://egytricks.com/">Litoria</a></li>
<li><a href="http://egytricks.com/">Nyctimystes</a></li>
</ul>
</li>
<li class="fly"><a href="http://egytricks.com">Phyllomedusinae</a>
<ul>
<li><a href="http://egytricks.com/">Agalychnis</a></li>
<li><a href="http://egytricks.com/">Cruziohyla</a></li>
<li><a href="http://egytricks.com/">Hylomantis</a></li>
<li><a href="http://egytricks.com/">Pachymedusa</a></li>
<li><a href="http://egytricks.com/">Phasmahyla</a></li>
<li><a href="http://egytricks.com/">Phrynomedusa</a></li>
<li><a href="http://egytricks.com/">Phyllomedusa</a></li>
</ul>
</li>
<li class="fly"><a href="http://egytricks.com/">Hemiphractinae</a>
<ul>
<li><a href="http://egytricks.com/">Cryptobatrachus</a></li>
<li><a href="http://egytricks.com/">Flectonotus</a></li>
<li><a href="http://egytricks.com/">Gastrotheca</a></li>
<li><a href="http://egytricks.com/">Hemiphractus</a></li>
<li><a href="http://egytricks.com/">Stefania</a></li>
</ul>
</li>
<li class="fly"><a href="http://egytricks.com/">Hylinae</a>
<ul>
<li><a href="http://egytricks.com/">Acris</a></li>
<li><a href="http://egytricks.com/">Anotheca</a></li>
<li><a href="http://egytricks.com/">Bokermannohyla</a></li>
<li><a href="http://egytricks.com/">Corythomantis</a></li>
<li><a href="http://egytricks.com/">Ecnomiohyla</a></li>
<li><a href="http://egytricks.com/">Hyloscirtus</a></li>
<li><a href="http://egytricks.com/">Megastomatohyla</a></li>
<li><a href="http://egytricks.com/">Osteocephalus</a></li>
<li><a href="http://egytricks.com/">Pseudacris</a></li>
<li><a href="http://egytricks.com/">Sphaenorhynchus</a></li>
<li><a href="http://egytricks.com/">Trachycephalus</a></li>
</ul>
</li>
<li class="fly"><a href="http://egytricks.com/">Rhacophorinae</a>
<ul>
<li><a href="http://egytricks.com/">Boophis</a></li>
<li><a href="http://egytricks.com/">Callixalus</a></li>
<li><a href="http://egytricks.com/">Chiromantis</a></li>
<li><a href="http://egytricks.com/">Cryptothylax</a></li>
<li><a href="http://egytricks.com/">Mantidactylus</a></li>
<li><a href="http://egytricks.com/">Rhacophorus</a></li>
</ul>
</li>
<li class="fly"><a href="http://egytricks.com/">Buergeriinae</a>
<ul>
<li><a href="http://egytricks.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://egytricks.com/">Complete treefrog</a></li>
<li><a href="http://egytricks.com/">Old World treefrogs</a></li>
<li><a href="http://egytricks.com/">Amphibian Species</a></li>
</ul>
</li>
</ul>
</div>

Hope you Like this Menu ...Also Check OTHER  CSS MENU BAR FOR BLOGGER