I was posted article“How to add beautiful  horizontal  css  menu bar in blogger blog” and today i’m going to share beautiful  pure CSS “drop down menu bar” for blogspot, drop down  navigation menu is  essential part of any blog or website,this is an important for every blogger or web designer to make the navigation easier of their blog to the several reason navigation menus is an ideal thing for it, when someone  hover the mouse cursor  on the specific category then it drop some subcategory of it in the vertical style, this menu know as the best styles “drop down menu” in css


Beautiful Drop Down Navigation menu

This beautiful css menu built with pure css and html, in this menu i have used beautiful color, it will not effected on the visitor eyes, this menu show sub category in vertical style,when you will place the mouse on the drop down menu it will show subcategory in different color. To add this menu

Go Blogger dashboard>>Layout>>Add Gadget (in header section) select html JavaScript copy the below code and past it.

<style type=”text/css”>/* Only CSS3 Horizontal Menu For Blogger By https://www.nafisflahi.com/
#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:#B2B300;height:50px;list-style:none;margin:0;padding:0;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;-webkit-box-shadow:inset 0 16px 0 0 rgbaundefined128,0,0);-moz-box-shadow:inset 0 16px 0 0 rgbaundefined128,0,0);box-shadow:inset 0 16px 0 0 rgbaundefined128,0,0)}#cssmenu li{float:left;padding:0 0 0 15px}#cssmenu li a{color:#800000;display:block;font-weight:normal;line-height:50px;margin:0;padding:0 25px;text-align:center;text-decoration:none}#cssmenu li a:hover{background:#9ACD32;color:#FFFF00;text-decoration:none;-webkit-box-shadow:inset 0 0 7px 2px rgbaundefined154,205,50);-moz-box-shadow:inset 0 0 7px 2px rgbaundefined0,0,0,0.3);box-shadow:inset 0 0 7px 2px rgbaundefined154,205,50)}#cssmenu ul li:hover a{background:#c60;color:#FFFFFF;text-decoration:none}#cssmenu li ul{display:none;height:auto;padding:0;margin:0;border:0;position:absolute;width:200px;z-index:200}#cssmenu li:hover ul{display:block}#cssmenu li li{display:block;float:none;margin:0;padding:0;width:200px;background:#800000;}#cssmenu li:hover li a{background:none}#cssmenu li ul a{display:block;height:50px;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{border:1;color:#800000;text-decoration:none;background:#9ACD32;-webkit-box-shadow:inset 0 0 7px 2px rgbaundefined154,205,50);-moz-box-shadow:inset 0 0 7px 2px rgbaundefined154,205,50);box-shadow:inset 0 0 7px 2px rgbaundefined154,205,50)}

/* Only CSS3 Horizontal Menu For Blogger By https://www.nafisflahi.com/ */


<div id=”cssmenu”>
<li><a href=”https://www.nafisflahi.com”><span>Home</span></a></li>
<li><a href=”#”><span>Blogger</span></a>
<li><a href=”#”><span>Widgets</span></a></li>
<li><a href=”#”><span>Menus</span></a></li>
<li><a href=”#”><span>toturial </span></a></li>
<li><a href=”#”><span>Make Money </span></a></li>
<li><a href=”#”><span>Advertise</span></a>
<li><a href=”#”><span>About</span></a></li>
<li><a href=”#”><span>Location</span></a></li>
<li><a href=”#”><span>Contact</span></a></li>


  • Now Replace the https://www.nafisflahi.com with your home page URL
  • Replace the # with your webpage links
  • save your widget
  • that’s all