Jan 7, 2013

Red Vertical CSS Multi Drop Down Menu for Blogger

Vertical CSS Muti 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,


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 +
  • 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">Types
<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>
<li><a href="http://egytricks.com/">South American</a></li>
<li class="fly"><a href="http://egytricks.com/">North American</a>
<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>
<li><a href="http://egytricks.com/">Japanese</a></li>
<li><a href="http://egytricks.com/">Chinese</a></li>
<li class="sub">Classifications
<li class="fly"><a href="http://egytricks.com/">Pelodryadinae</a>
<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>
<li class="fly"><a href="http://egytricks.com">Phyllomedusinae</a>
<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>
<li class="fly"><a href="http://egytricks.com/">Hemiphractinae</a>
<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>
<li class="fly"><a href="http://egytricks.com/">Hylinae</a>
<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>
<li class="fly"><a href="http://egytricks.com/">Rhacophorinae</a>
<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>
<li class="fly"><a href="http://egytricks.com/">Buergeriinae</a>
<li><a href="http://egytricks.com/">Buergeria</a></li>
<li class="sub">References
<li><a href="http://egytricks.com">Wikipedia</a></li>
<li><a href="http://egytricks.com">Encyclopedia</a></li>
<li class="sub">Links
<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>

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

Subscribe Updates, Its FREE!



Copyright @ 2013 EgyTricks.

Designed by Vikash | EgyTricks