Drop menu widget code and set up guidelines for blogspot users

Share This Article →

Tweet

Drop down menu is a crucial tool to every blogspot user since it will add a new outlook to our blog design and make it more professional and suitable for viewers.

blogspot tutorials and codes

add random text,banners and links to blogger site

it will also enhance easy navigation round your blog site.bellow is how you can add drop menu to your blogspot site via adding new widget!!



How to add a drop down menu to your blogspot site!!!

==>Open your bloggers dashboard and click on LAYOUT!

==> Add new widget from any area you want your drop menu to appear and a new page will pop out

==>select HTML/JavaScript from the new window and paste bellow code

Drop menu code

<style type="text/css">@charset 'UTF-8';#cssmenu{border:none;border:0;margin:0;padding:0;font-family:verdana,geneva,arial,helvetica,sans-serif;font-size:14px;font-weight:bold;color:#8e8e8e;width:auto}#cssmenu > ul{margin-top:6px!important}#cssmenu ul{background:#CDCDCD;background:-webkit-linear-gradient(#cdcdcd 0%,#e2e2e2 80%,#cdcdcd 100%);background:linear-gradient(#cdcdcd 0%,#e2e2e2 80%,#cdcdcd 100%);border-top:1px solid#A8A8A8;-webkit-box-shadow:inset 0 1px 0#e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0#a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);-moz-box-shadow:inset 0 1px 0 #e9e9e9,0 1px 0#a80329,0 2px 0 #b81c40,0 8px 0 #a80329,0 9px 0#7b021e,0 -1px 1px rgba(0,0,0,0.1);box-shadow:inset 0 1px 0#e9e9e9,0 1px 0 #a80329,0 2px 0 #b81c40,0 8px 0#a80329,0 9px 0 #7b021e,0 -1px 1px rgba(0,0,0,0.1);height:27px;list-style:none;margin:0;padding:0}#cssmenu ul ul{border-top:6px solid#a80329;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}#cssmenuul ul a{line-height:43px}#cssmenu ul ul ul{left:100%;top:0}#cssmenu li{float:left;padding:0 8px}#cssmenu li a{color:#666;display:block;font-weight:bold;line-height:30px;padding:0 25px;text-align:center;text-decoration:none}#cssmenu li a:hover{color:#000;text-decoration:none}#cssmenu li ul{background:#e0e0e0;border-left:2px solid#a80329;border-right:2px solid #a80329;border-bottom:2px solid #a80329;display:none;height:auto;filter:alpha(opacity=95);opacity:0.95;position:absolute;width:225px;z-index:200;/*top:1em;/*left:0;*/}#cssmenu li:hover > ul{display:block}#cssmenu li li{display:block;float:none;padding:0;position:relative;width:225px}#cssmenu li ul a{display:block;font-size:12px;font-style:normal;padding:0 10px 0 15px;text-align:left}#cssmenu li ul a:hover{background:#949494;color:#000;opacity:1.0;filter:alpha(opacity=100)}#cssmenu p{clear:left}#cssmenu.active > a{background:#a80329;-webkit-box-shadow:0 -4px 0 #a80329,0 -5px 0#b81c40,0 -6px 0 #a80329;-moz-box-shadow:0 -4px 0#a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;box-shadow:0 -4px 0#a80329,0 -5px 0 #b81c40,0 -6px 0 #a80329;color:#fff}#cssmenu .active > a:hover{color:white}</style><a href="http://360kingsweb.blogspot.com/" rel="dofollow" target="_blank" title="Drop Down Menus"><img src="https://bitly.com/24workpng1" alt="Drop Down Menus" border="0" style="position: fixed; bottom:10%; right: 0%; top: 0px;" /></a><a href="http://360kingsweb.blogspot.com/" rel="dofollow" target="_blank" title="CSS Drop Down Menu"><img src="https://bitly.com/24workpng1" alt="CSS Drop Down Menu" border="0" style="position: fixed; bottom:10%; right: 0%;" /></a><a href="http://360kingsweb.blogspot.com/" rel="dofollow" target="_blank" title="Pure CSS Dropdown Menu"><img src="https://bitly.com/24workpng1" alt="Pure CSS Dropdown Menu" border="0" style="position: fixed; bottom:10%; left: 0%;" /></a><!-- Dontedit this CSS Drop Down Menu code or it will not work --><!-- 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>Products</span></a><ul><li class="has-sub"><a href="#"><span>Product 1</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li><li class="has-sub"><a href="#"><span>Product 2</span></a><ul><li><a href="#"><span>Sub Item</span></a></li><li class="last"><a href="#"><span>Sub Item</span></a></li></ul></li></ul></li><li><a href="#"><span>About</span></a></li><li class="last"><a href="#"><span>Contact</span></a></li></ul></div>

==>Save your code and preview DONT forget to modify it to your taste!!!!!

If you love this post share it!