Css Menu-Add blue css Multi Drop Down Menu to Blogger

This is blue Css Multi drop down menu for Blogger.in this Post i am going to share how to add a beautiful css menu to blogger.
CSS EFFECT.

Now 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.

.preload1 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2HosTPrxhuu9WuRubs6V99gSB12uwAYOVUjRA9zmetLk9VlEl_ZAxlF7MnknmWAkcUsG7lCBNUM_vHpdiLNtPp3A9arBcYTspuL5fCq1L77j3OIFjegJMrQIm1YodedElg9neS4XP76Y/s1600/blank_over.gif);}
.preload2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9aGR2uy6BaSK4JNyjkuhJ3TnGrRe1MpsAB0kNUUGFVSV5Jb3AqvOFRhiNIfrQgQD9AZ7sFPOgyluZIyUKZls4C-lnKAq9g5DIac_u757ngYCYXJpTvpPUIPAvLVIAGVQryRHiYyKVstw/s1600/blank_overa.gif);}

#nav {padding:0; margin:0; list-style:none; height:36px; background:#fff; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivy3pmZLESkdXHamgCErnrKbwHMLqadBUSesQjWwgkio22s1dHEfjpGiesSyqhwePTCXhNUmCx8rxLjd3S4FAge4OJ5RG8D1sG3C53VVU3trXQSRARNz2Z9JFwCOS7Q6u0wsDgV6SSswE/s1600/blank.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivy3pmZLESkdXHamgCErnrKbwHMLqadBUSesQjWwgkio22s1dHEfjpGiesSyqhwePTCXhNUmCx8rxLjd3S4FAge4OJ5RG8D1sG3C53VVU3trXQSRARNz2Z9JFwCOS7Q6u0wsDgV6SSswE/s1600/blank.gif) right top;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5FU4TWP7Darkc-Ax1rhO7OSLd9ezS3u6sQACxayJtytA9WEOCouCry_Fb7oZAJ89dHzA0-fQZ9rmrKbyWfLuF-oyidHn5VkPW-rJUKkYYEIJ48M4a3XCcWpRim2TqNRV0KU6mhMYDsk0/s1600/blanka.gif) no-repeat right top;}
#nav li a.top_link:hover {color:#fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2HosTPrxhuu9WuRubs6V99gSB12uwAYOVUjRA9zmetLk9VlEl_ZAxlF7MnknmWAkcUsG7lCBNUM_vHpdiLNtPp3A9arBcYTspuL5fCq1L77j3OIFjegJMrQIm1YodedElg9neS4XP76Y/s1600/blank_over.gif) no-repeat;}
#nav li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2HosTPrxhuu9WuRubs6V99gSB12uwAYOVUjRA9zmetLk9VlEl_ZAxlF7MnknmWAkcUsG7lCBNUM_vHpdiLNtPp3A9arBcYTspuL5fCq1L77j3OIFjegJMrQIm1YodedElg9neS4XP76Y/s1600/blank_over.gif) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9aGR2uy6BaSK4JNyjkuhJ3TnGrRe1MpsAB0kNUUGFVSV5Jb3AqvOFRhiNIfrQgQD9AZ7sFPOgyluZIyUKZls4C-lnKAq9g5DIac_u757ngYCYXJpTvpPUIPAvLVIAGVQryRHiYyKVstw/s1600/blank_overa.gif) no-repeat right top;}

#nav li:hover > a.top_link {color:#fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2HosTPrxhuu9WuRubs6V99gSB12uwAYOVUjRA9zmetLk9VlEl_ZAxlF7MnknmWAkcUsG7lCBNUM_vHpdiLNtPp3A9arBcYTspuL5fCq1L77j3OIFjegJMrQIm1YodedElg9neS4XP76Y/s1600/blank_over.gif) no-repeat;}
#nav li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2HosTPrxhuu9WuRubs6V99gSB12uwAYOVUjRA9zmetLk9VlEl_ZAxlF7MnknmWAkcUsG7lCBNUM_vHpdiLNtPp3A9arBcYTspuL5fCq1L77j3OIFjegJMrQIm1YodedElg9neS4XP76Y/s1600/blank_over.gif) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9aGR2uy6BaSK4JNyjkuhJ3TnGrRe1MpsAB0kNUUGFVSV5Jb3AqvOFRhiNIfrQgQD9AZ7sFPOgyluZIyUKZls4C-lnKAq9g5DIac_u757ngYCYXJpTvpPUIPAvLVIAGVQryRHiYyKVstw/s1600/blank_overa.gif) no-repeat right top;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
#nav ul,
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover ul.sub
{left:0; top:31px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; height:auto; z-index:300;}
#nav li:hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav li:hover ul.sub li a
{display:block; font-size:11px; height:20px; width:90px; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
#nav li ul.sub li a.fly
{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil-6A5XkOdIhAIx3aUNi46h9reYhgXu279Z-YI_zUOSxJ-wjGP1_DASlBNfK1jnnWvRznS2ZA_y4mXTX3qbGX8VvFS7JLg3FHnKW72H1gRhJqbL7RkvZfw4BLJfJhs5rlbkUfbcaESTsI/s1600/arrow.gif) 80px 7px no-repeat;}
#nav li:hover ul.sub li a:hover
{background:#3a93d2; color:#fff;}
#nav li:hover ul.sub li a.fly:hover
{background:#3a93d2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsRe_B8n1Bz_r6XmBju7FlFBj4PB3TIfkRcLNSO1MgpgzCEPdkzyAnVpJ_hDOJZ2OOMjeaYOMyc_xXHbMol4rcSVbl8QoEZgztXg7Zr-Mp_fmXLWFCCsGEKvl7KnXG1BVuDhIoZyzbib8/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsRe_B8n1Bz_r6XmBju7FlFBj4PB3TIfkRcLNSO1MgpgzCEPdkzyAnVpJ_hDOJZ2OOMjeaYOMyc_xXHbMol4rcSVbl8QoEZgztXg7Zr-Mp_fmXLWFCCsGEKvl7KnXG1BVuDhIoZyzbib8/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}

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,But i will  Recommend You to Replace this menu code in your Blogger Template with already existing one., or add below code before or after already existing one menu code.

• 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.

<ul id="nav">
<li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span></a>
<ul class="sub">
<li><a href="#nogo3" class="fly">Cameras</a>
<ul>
<li><a href="#nogo4">Nikon</a></li>
<li><a href="#nogo5">Minolta</a></li>
<li><a href="#nogo6">Pentax</a></li>
</ul>
</li>
<li class="mid"><a href="#nogo7" class="fly">Lenses</a>
<ul>
<li><a href="#nogo8">Wide Angle</a></li>
<li><a href="#nogo9">Standard</a></li>
<li><a href="#nogo10">Telephoto</a></li>
<li><a href="#nogo11" class="fly">Zoom</a>
<ul>
<li><a href="#nogo12">35mm to 125mm</a></li>
<li><a href="#nogo13">50mm to 250mm</a></li>
<li><a href="#nogo14">125mm to 500mm</a></li>
</ul>
</li>
<li><a href="#nogo15">Mirror</a></li>
<li><a href="#nogo16" class="fly">Non standard</a>
<ul>
<li><a href="#nogo17">Bayonet mount</a></li>
<li><a href="#nogo18">Screw mount</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#nogo19">Flash Guns</a></li>
<li><a href="#nogo20">Tripods</a></li>
<li><a href="#nogo21">Filters</a></li>
</ul>
</li>
<li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span></a>
<ul class="sub">
<li><a href="#nogo23">Printing</a></li>
<li><a href="#nogo24">Photo Framing</a></li>
<li><a href="#nogo25">Retouching</a></li>
<li><a href="#nogo26">Archiving</a></li>
</ul>
</li>
<li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span></a>
<ul class="sub">
<li><a href="#nogo28">Support</a></li>
<li><a href="#nogo29" class="fly">Sales</a>
<ul>
<li><a href="#nogo30">USA</a></li>
<li><a href="#nogo31">Canadian</a></li>
<li><a href="#nogo32">South American</a></li>
<li><a href="#nogo33" class="fly">European</a>
<ul>
<li><a href="#nogo34" class="fly">British</a>
<ul>
<li><a href="#nogo35">London</a></li>
<li><a href="#nogo36">Liverpool</a></li>
<li><a href="#nogo37">Glasgow</a></li>
<li><a href="#nogo38" class="fly">Bristol</a>
<ul>
<li><a href="#nogo39">Redland</a></li>
<li><a href="#nogo40">Hanham</a></li>
<li><a href="#nogo41">Eastville</a></li>
</ul>
</li>
<li><a href="#nogo42">Cardiff</a></li>
<li><a href="#nogo43">Belfast</a></li>
</ul>
</li>
<li><a href="#nogo44">French</a></li>
<li><a href="#nogo45">German</a></li>
<li><a href="#nogo46">Spanish</a></li>
</ul>
</li>
<li><a href="#nogo47">Australian</a></li>
<li><a href="#nogo48">Asian</a></li>
</ul>
</li>
<li><a href="#nogo49">Buying</a></li>
<li><a href="#nogo50">Photographers</a></li>
<li><a href="#nogo51">Stockist</a></li>
<li><a href="#nogo52">General</a></li>
</ul>
</li>
<li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a>
<ul class="sub">
<li><a href="#nogo54">Online</a></li>
<li><a href="#nogo55">Catalogue</a></li>
<li><a href="#nogo56">Mail Order</a></li>
</ul>
</li>
<li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>

Customazing 

Replace all Link and Text with yours
eg. <li><a href="#nogo3" class="fly">Cameras</a>   to   <li><a href="http://egytricks.com/" class="fly">TRICKS WORLD</a>

Now all done if have any question or Problem according to this Vertical CSS Navigation Menu for  Blogger the Comment below
Also Check a Awesome  Multi Drop Down CSS Menu for Blog