Add Drop Down Navigation Menu on Blogger

     

Drop down menu is the most important for any blog. So, I have a very useful drop down menu for bloggers.

Howto?

 1.  Log in to your Blogger account.

2.  Go to Dashboard >  Layout  > Add a Gadget> Html/JavaScript,
               
3.  Then a pop up window will appear,

4.  Now Copy and Paste the below code in the content area,

5.   Now save the template.now you have done,


CODES ARE HERE

<style type="text/css">#cssmenu{border:none;border:0;margin:0;padding:0;font:67.5% 'Lucida Sans Unicode','Bitstream Vera Sans','Trebuchet Unicode MS','Lucida Grande',Verdana,Helvetica,sans-serif;font-size:14px;font-weight:bold;width:auto}#cssmenu ul{background:#333;height:35px;list-style:none;margin:0;padding:0}#cssmenu li{float:left;padding:0}#cssmenu li a{background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJkmmj0EmsEvYRaydhfg14zW3c6kzmRF7zoJC30PdgheWOCgcr8u5424s1hLkABzuk3fEkb68nRFoPQZBK5HcbYr4Lx2_XfRgD6S3x_Lfrs2jDUU1ZGKr4X0f_QY9pW0vlSBHGNvuXnzmY/s1600/seperator.gif') bottom right no-repeat;display:block;font-weight:normal;line-height:35px;margin:0;padding:0 25px;text-align:center;text-decoration:none}#cssmenu > ul > li > a{color:#ccc}#cssmenu ul ul a{color:#ccc}#cssmenu li > a:hover,#cssmenu ul li:hover > a{background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUEj5uK8-UmxPqN-fISanuEnSKvwoOIwv3n5sRCkr_R3uSN8g8gdJKopaE9yuA9rvLeNC2eq47Dz31t_ew-1a5VYqmtF1LtgcRyv_mjG-kPUneKYiGSzpW_bhgWxPhTuIvcLP2yMpnpxlw/s1600/hover.png') bottom center no-repeat;color:#FFF;text-decoration:none}#cssmenu li ul{background:#333;display:none;height:auto;padding:0;margin:0;border:0;position:absolute;width:225px;z-index:200;/*top:1em;/*left:0;*/}#cssmenu li:hover ul{display:block}#cssmenu li li{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm1gxfCY0MsDmOPmd28cyeqT0EGKF9-Fetav7jwog5VJGs3jSRmjQbUik9Q6EhyphenhyphenytOwjbq1V0x9HRmLgpqFrF4sAp780_c5Mk9Wk-mvSmGUQXmnG6wo8sRHw_5j36PnHd9M-q9we0G_7Ww/s1600/sub_sep.gif') bottom left no-repeat;display:block;float:none;margin:0;padding:0;width:225px}#cssmenu li:hover li a{background:none}#cssmenu li ul a{display:block;height:35px;font-size:12px;font-style:normal;margin:0;padding:0 10px 0 15px;text-align:left}#cssmenu li ul a:hover,#cssmenu li ul li:hover > a{background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYTOSxLmg-KbW7Tb6_nAXpKiULbKiXfypJGtjegpTEayGve5XAaJxQWCckycEEY7JoQVjTHxEsSBy6x42AEhQJlOykmjyOSVVtjrCQz2LGqw-Dl3HX_ImMrE80Wzv7MgZKQazYAuCcxgNq/s1600/hover_sub.png') center left no-repeat;border:0;color:#fff;text-decoration:none}#cssmenu p{clear:left}</style><img src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><img src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><img src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<!-- customize your menus Links -->
<div id="cssmenu">
<ul>
<li class="active"><a href="index.html"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>BLOGGING</span></a>
<ul>
<li><a href="#"><span>BLOGGER Widgets</span></a></li>
<li><a href="#"><span>BLOGGER TIPS</span></a></li>
<li class="last"><a href="#"><span>OTHERS</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>PRODUCTS</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Location</span></a></li>
</ul>
</li>

Note:- Change the # with the link of your page and yellow with your page name.