Top 5 Drop Down Horizontal Menu Widget for blogger

Har website or blog ke liye Menu behad jaruri hota hai, issay visitors ko navigation me help milti hai. Agar menu bar na ho to aapke blog par aapne wale visitors samajh nahi payenge ki aapke blog me kya-kya content hai or unhe aapke blog ko navigate karne me bhi problem aayegi. As a result aapke visitor jyada time tak apne blog ko nahi visit kar sakte.

Top 5 Drop Down Horizontal Menu Widget for blogger

Aapne menu bar har website or blog me jarur dekha hoga , or aap clearly andaja laga sakte hi ki kisi bhi blog ke liye menu bar itna jaruri hota hai. Agar aap apne blog par menu bar use nahi karte to ek baat hamesa yaad rakho ki bina menu bar ke koi bhi visitors aapke blog ko acche se navigate na kare payenge or aapke blog ko navigate nahi karne ki wajah se wo jyada der tak aapka blog par time spend nahi karenge. Jiski wajah se aapke blog ka bounce rate badh jayega jo ki SEO ke liye accha nahi hai.

Aaj hum aapko batayenge ki aap khud se kaise apne blog par horizontal navigation menu laga sakte hai. Ye bahut hi esay hai.

Top 5 Drop Down Horizontal Menu Widget for blogger… Kaise apne blog par Menu bar lagaye ?

ब्लॉग्गिंग से संबंधित किसी भी तरह कि सहायता के लिए आप हमसे whatsapp के जरिये सम्पर्क कर सकते हो। हमारा whatsapp नंबर है 8249263031

Step : 1

add html javascript to blogspot

1. Apne blogger dashboard par Layout par click kare
2. Header section par Add a Gadget par click kare

Step : 2

blogspot html java script

Jaise hi aap Add a Gadget par click karenge waise hi ek popup window open hoga , waha par HTML/JavaScript par click kare.

Step : 3

edit widget blogspot

Yaha par aapko niche diye gaye koi bhi drop down menu style code me se kisi bhi ek style code ko paste karna hai, Fir Save button par click karna hai….

Style : 1

blogger menu style 1

Code :

<Style> #menu-bar { width: 95%; margin: 0px 0px 0px 0px; padding: 6px 6px 4px 6px; height: 29px; line-height: 100%; border-radius: 24px; -webkit-border-radius: 24px; -moz-border-radius: 24px; box-shadow: 2px 2px 3px #666666; -webkit-box-shadow: 2px 2px 3px #666666; -moz-box-shadow: 2px 2px 3px #666666; background: #8B8B8B; background: linear-gradient(top,  #A9A9A9,  #7A7A7A); background: -ms-linear-gradient(top,  #A9A9A9,  #7A7A7A); background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A)); background: -moz-linear-gradient(top,  #A9A9A9,  #7A7A7A); border: solid 1px white; position:relative; z-index:999; } #menu-bar li { margin: 0px 0px 6px 0px; padding: 0px 6px 0px 6px; float: left; position: relative; list-style: none; } #menu-bar a { font-weight: bold; font-family: georgia; font-style: normal; font-size: 12px; color: #E7E5E5; text-decoration: none; display: block; padding: 6px 20px 6px 20px; margin: 0; margin-bottom: 6px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; text-shadow: 2px 2px 3px #000000; } #menu-bar li ul li a { margin: 0; } #menu-bar .active a, #menu-bar li:hover > a { background: #0399D4; background: linear-gradient(top,  #EBEBEB,  #A1A1A1); background: -ms-linear-gradient(top,  #EBEBEB,  #A1A1A1); background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1)); background: -moz-linear-gradient(top,  #EBEBEB,  #A1A1A1); color: #444444; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); box-shadow: 0 1px 1px rgba(0, 0, 0, .2); text-shadow: 2px 2px 3px #FFFFFF; } #menu-bar ul li:hover a, #menu-bar li:hover li a { background: none; border: none; color: #666; -box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; } #menu-bar ul a:hover { background: #0399D4 !important; background: linear-gradient(top,  #04ACEC,  #0186BA) !important; background: -ms-linear-gradient(top,  #04ACEC,  #0186BA) !important; background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important; background: -moz-linear-gradient(top,  #04ACEC,  #0186BA) !important; color: #FFFFFF !important; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; text-shadow: 2px 2px 3px #FFFFFF; } #menu-bar li:hover > ul { display: block; } #menu-bar ul { background: #DDDDDD; background: linear-gradient(top,  #FFFFFF,  #CFCFCF); background: -ms-linear-gradient(top,  #FFFFFF,  #CFCFCF); background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF)); background: -moz-linear-gradient(top,  #FFFFFF,  #CFCFCF); display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 30px; left: 0; border: solid 1px #B4B4B4; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 2px 2px 3px #222222; -moz-box-shadow: 2px 2px 3px #222222; box-shadow: 2px 2px 3px #222222; } #menu-bar ul li { float: none; margin: 0; padding: 0; } #menu-bar ul a { padding:10px 0px 10px 15px; color:#424242 !important; font-size:12px; font-style:normal; font-family:arial; font-weight: normal; text-shadow: 2px 2px 3px #FFFFFF; } #menu-bar ul li:first-child > a { border-top-left-radius: 10px;-webkit-border-top-left-radius: 10px;-moz-border-radius-topleft: 10px;border-top-right-radius: 10px;-webkit-border-top-right-radius: 10px;-moz-border-radius-topright: 10px;}#menu-bar ul li:last-child > a {border-bottom-left-radius: 10px;-webkit-border-bottom-left-radius: 10px;-moz-border-radius-bottomleft: 10px;border-bottom-right-radius: 10px;-webkit-border-bottom-right-radius: 10px;-moz-border-radius-bottomright: 10px;}#menu-bar:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}#menu-bar {display: inline-block;}html[xmlns] #menu-bar {display: block;}* html #menu-bar {height: 1%;}</style> <ul id="menu-bar"> 
<li class="active"><a href="#">Home</a></li>
<li><a href="#">menu</a> <ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
</ul> </li>
<li><a href="#">Services</a> <ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li> </ul>
</li> <li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li> </ul>

Style : 2

blogger menu style 2

Code :

<Style> #menu-bar { width: 95%; margin: 0px 0px 0px 0px; padding: 6px 6px 4px 6px; height: 32px; line-height: 100%; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; box-shadow: 0px 7px 3px #666666; -webkit-box-shadow: 0px 7px 3px #666666; -moz-box-shadow: 0px 7px 3px #666666; background: #8B8888; background: linear-gradient(top,  #D8E8E5,  #7A7A7A); background: -ms-linear-gradient(top,  #D8E8E5,  #7A7A7A); background: -webkit-gradient(linear, left top, left bottom, from(#D8E8E5), to(#7A7A7A)); background: -moz-linear-gradient(top,  #D8E8E5,  #7A7A7A); border: ridge 3px #6D6D6D; position:relative; z-index:999; } #menu-bar li { margin: 0px 0px 6px 0px; padding: 0px 3px 2px 6px; float: left; position: relative; list-style: none; } #menu-bar a { font-weight: bold; font-family: verdana; font-style: oblique; font-size: 15px; color: #2ECEE7; text-decoration: none; display: block; padding: 6px 20px 6px 20px; margin: 0; margin-bottom: 6px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-shadow: 2px 2px 3px #000000; } #menu-bar li ul li a { margin: 0; } #menu-bar .active a, #menu-bar li:hover > a { background: #0399D4; background: linear-gradient(top,  #EBEBEB,  #A1A1A1); background: -ms-linear-gradient(top,  #EBEBEB,  #A1A1A1); background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1)); background: -moz-linear-gradient(top,  #EBEBEB,  #A1A1A1); color: #444444; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); box-shadow: 0 1px 1px rgba(0, 0, 0, .2); text-shadow: 2px 2px 3px #FFFFFF; } #menu-bar ul li:hover a, #menu-bar li:hover li a { background: none; border: none; color: #666; -box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; } #menu-bar ul a:hover { background: #0399D4 !important; background: linear-gradient(top,  #04ACEC,  #0186BA) !important; background: -ms-linear-gradient(top,  #04ACEC,  #0186BA) !important; background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important; background: -moz-linear-gradient(top,  #04ACEC,  #0186BA) !important; color: #FFFFFF !important; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; text-shadow: 2px 2px 3px #FFFFFF; } #menu-bar li:hover > ul { display: block; } #menu-bar ul { background: #DDD0D8; display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 30px; left: 0; border: solid 1px #B4B4B4; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; -webkit-box-shadow: -7px 6px 19px #220517; -moz-box-shadow: -7px 6px 19px #220517; box-shadow: -7px 6px 19px #220517; } #menu-bar ul li { float: none; margin: 0; padding: 0; } #menu-bar ul a { padding:10px 0px 10px 15px; color:#424242 !important; font-size:12px; font-style:normal; font-family:arial; font-weight: normal; text-shadow: 2px 2px 3px #FFFFFF; } #menu-bar ul li:first-child > a { border-top-left-radius: 0px; -webkit-border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; border-top-right-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-topright: 0px; } #menu-bar ul li:last-child > a { border-bottom-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-radius-bottomleft: 0px; border-bottom-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-bottomright: 0px; } #menu-bar:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #menu-bar { display: inline-block; } html[xmlns] #menu-bar { display: block; } * html #menu-bar { height: 1%; }</style> <ul id="menu-bar"> 
<li class="active">
<a href="#">Home</a></li>
<li><a href="#">menu</a>
<ul> <li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li> </ul> </li>
<li><a href="#">Services</a> <ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li> </ul> </li>
<li><a href="#">About</a></li> <li><a href="#">Contact Us</a></li> </ul>

Style : 3

blogger menu style 3

Code :

<Style> #menu-bar { width: 95%; margin: 0px 0px 0px 0px; padding: 5px 4px 4px 4px; height: 40px; line-height: 100%; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; box-shadow: 2px 2px 3px #666666; -webkit-box-shadow: 2px 2px 3px #666666; -moz-box-shadow: 2px 2px 3px #666666; background: #8B8B8B; background: linear-gradient(top,  #6E95A9,  #7A7A7A); background: -ms-linear-gradient(top,  #6E95A9,  #7A7A7A); background: -webkit-gradient(linear, left top, left bottom, from(#6E95A9), to(#7A7A7A)); background: -moz-linear-gradient(top,  #6E95A9,  #7A7A7A); border: groove 2px #6D6D6D; position:relative; z-index:999; } #menu-bar li { margin: 0px 0px 6px 0px; padding: 0px 6px 0px 6px; float: left; position: relative; list-style: none; } #menu-bar a { font-weight: bold; font-family: arial; font-style: normal; font-size: 12px; color: #E7E5E5; text-decoration: none; display: block; padding: 6px 20px 6px 20px; margin: 0; margin-bottom: 6px; border-radius: 0px; -webkit-border-radius: 0px; -moz-border-radius: 0px; text-shadow: 2px 2px 3px #000000; } #menu-bar li ul li a { margin: 0; } #menu-bar .active a, #menu-bar li:hover > a { background: #0399D4; background: linear-gradient(top,  #EBEBEB,  #A1A1A1); background: -ms-linear-gradient(top,  #EBEBEB,  #A1A1A1); background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1)); background: -moz-linear-gradient(top,  #EBEBEB,  #A1A1A1); color: #444444; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); box-shadow: 0 1px 1px rgba(0, 0, 0, .2); text-shadow: 2px 2px 3px #FFFFFF; } #menu-bar ul li:hover a, #menu-bar li:hover li a { background: none; border: none; color: #666; -box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; } #menu-bar ul a:hover { background: #0399D4 !important; background: linear-gradient(top,  #04ACEC,  #0186BA) !important; background: -ms-linear-gradient(top,  #04ACEC,  #0186BA) !important; background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important; background: -moz-linear-gradient(top,  #04ACEC,  #0186BA) !important; color: #FFFFFF !important; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; text-shadow: 2px 2px 3px #FFFFFF; } #menu-bar li:hover > ul { display: block; } #menu-bar ul { background: #DDDDDD; background: linear-gradient(top,  #FFFFFF,  #CFCFCF); background: -ms-linear-gradient(top,  #FFFFFF,  #CFCFCF); background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF)); background: -moz-linear-gradient(top,  #FFFFFF,  #CFCFCF); display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 30px; left: 0; border: solid 1px #B4B4B4; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 2px 2px 3px #222222; -moz-box-shadow: 2px 2px 3px #222222; box-shadow: 2px 2px 3px #222222; } #menu-bar ul li { float: none; margin: 0; padding: 0; } #menu-bar ul a { padding:10px 0px 10px 15px; color:#424242 !important; font-size:12px; font-style:normal; font-family:arial; font-weight: normal; text-shadow: 2px 2px 3px #FFFFFF; } #menu-bar ul li:first-child > a { border-top-left-radius: 10px; -webkit-border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topright: 10px; } #menu-bar ul li:last-child > a { border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; } #menu-bar:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #menu-bar { display: inline-block; } html[xmlns] #menu-bar { display: block; } * html #menu-bar { height: 1%; } }</style> <ul id="menu-bar"> 
<li class="active"><a href="#">Home</a></li>
<li><a href="#">menu</a> <ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li> </ul> </li>
<li><a href="#">Services</a> <ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li> </ul> </li>
<li><a href="#">About</a></li> <li><a href="#">Contact Us</a></li> </ul>

Style : 4

blogger menu style 4

Code :

<style type="text/css">#cssmenu ul,#cssmenu li,#cssmenu span,#cssmenu a{margin:0;padding:0;position:relative}#cssmenu{height:49px;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#eee9f0));background:-webkit-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-o-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-ms-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:linear-gradient(top,#fefefe 0%,#eee9f0 100%);border-bottom:2px solid #db000b;width:auto}#cssmenu:after,#cssmenu ul:after{content:'';display:block;clear:both}#cssmenu a{background:#fefefe;background:-moz-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#ececec));background:-webkit-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-o-linear-gradient(top,#fefefe 0%,#ececec 100%);background:-ms-linear-gradient(top,#fefefe 0%,#ececec 100%);background:linear-gradient(top,#fefefe 0%,#ececec 100%);color:#000;display:inline-block;font-family:Helvetica,Arial,Verdana,sans-serif;font-size:12px;line-height:49px;padding:0 20px;text-decoration:none}#cssmenu ul{list-style:none}#cssmenu > ul{float:left}#cssmenu > ul > li{float:left}#cssmenu > ul > li > a{color:#000;font-size:12px}#cssmenu > ul > li:hover:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 0;-moz-border-radius:5px 0 0 0;-webkit-border-radius:5px 0 0 0}#cssmenu > ul > li.active:after{content:'';display:block;width:0;height:0;position:absolute;left:50%;bottom:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #db000b;margin-left:-10px}#cssmenu > ul > li.active > a{-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1);background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%)}#cssmenu > ul > li:hover > a{background:#ececec;background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);background:linear-gradient(top,#ececec 0%,#fef ef 100%);-moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);-webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);box-shadow:inset 0 0 2px rgba(0,0,0,0.1)}#cssmenu .has-sub{z-index:1}#cssmenu .has-sub:hover > ul{display:block}#cssmenu .has-sub ul{display:none;position:absolute;width:200px;top:100%;left:0}#cssmenu .has-sub ul li{*margin-bottom:-1px}#cssmenu .has-sub ul li a{background:#db000b;border-bottom:1px dotted #ff0f1b;filter:none;font-size:11px;display:block;line-height:120%;padding:10px;color:#fff}#cssmenu .has-sub ul li:hover a{background:#a80008}#cssmenu .has-sub .has-sub:hover > ul{display:block}#cssmenu .has-sub .has-sub ul{display:none;position:absolute;left:100%;top:0}#cssmenu .has-sub .has-sub ul li a{background:#a80008;border-bottom:1px dotted #ff0f1b}#cssmenu .has-sub .has-sub ul li a:hover{background:#8f0007}</style> <!-- Dont edit 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>

Style : 5

blogger menu style 5

Code :

<style type="text/css">#cssmenu ul{margin:0;padding:0}#cssmenu li{margin:0;padding:0}#cssmenu a{margin:0;padding:0}#cssmenu ul{list-style:none}#cssmenu a{text-decoration:none}#cssmenu{height:61px;background-color:#353131;box-shadow:0px 6px 3px rgba(0,0,0,0.4);width:auto}#cssmenu > ul > li{float:left;margin-left:15px;position:relative}#cssmenu > ul > li > a{color:#a0a0a0;font-family:Verdana,'Lucida Grande';font-size:15px;line-height:70px;padding:15px 20px;-webkit-transition:color .15s;-moz-transition:color .15s;-o-transition:color .15s;transition:color .15s}#cssmenu > ul > li > a:hover{color:#fff}#cssmenu > ul > li > ul{opacity:0;visibility:hidden;padding:16px 0 20px 0;background-color:#fafafa;text-align:left;position:absolute;top:55px;left:50%;margin-left:-90px;width:180px;-webkit-transition:all .3s .1s;-moz-transition:all .3s .1s;-o-transition:all .3s .1s;transition:all .3s .1s;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4)}#cssmenu > ul > li:hover > ul{opacity:1;top:65px;visibility:visible}#cssmenu > ul > li > ul:before{content:'';display:block;border-color:transparent transparent #fafafa transparent;border-style:solid;border-width:10px;position:absolute;top:-20px;left:50%;margin-left:-10px}#cssmenu > ul ul > li{position:relative}#cssmenu ul ul a{color:#323232;font-family:Verdana,'Lucida Grande';font-size:13px;background-color:#fafafa;padding:5px 8px 7px 16px;display:block;-webkit-transition:background-color 0.1s;-moz-transition:background-color 0.1s;-o-transition:background-color 0.1s;transition:background-color 0.1s}#cssmenu ul ul a:hover{background-color:#f0f0f0}#cssmenu ul ul ul{visibility:hidden;opacity:0;position:absolute;top:-16px;left:206px;padding:16px 0 20px 0;background-color:#fafafa;text-align:left;width:180px;-webkit-transition:all .3s;-moz-transition:all .3s;-o-transition:all .3s;transition:all .3s;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4)}#cssmenu ul ul > li:hover > ul{opacity:1;left:190px;visibility:visible}#cssmenu ul ul a:hover{background-color:#cc2c24;color:#f0f0f0}</style> <!-- 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>Product</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>

NOTE : Code ko edit kare or apne catagory ka link add kare.

menu bar blogger widget

Aap upar diye image ko dekh ke samajh sakte ho ki aap jo style code paste karoge waha par aapko apne blog category ka url ya post url link dalna hoga. Maan lijiye ki me apne blog ke home page ka link menu bar me lagana chahta hu to code ko modify karne ke bad kuch is tarah najar aayega.

<li><a href=”www.acchibaat.com”>Home</a></li>

Bas aapko aise hi style code ko modify karna hai or save karna hai.

To friends aap bhi apne blog par drop-down menu laga kar apne blog ko ek professional look dijiye. Agar aapko hamari ye article acchi lagi ye aapko menu bar lagane me koi problem face karni pad rahi hai to hume comment jarur kare. Happy Blogging

9 Replies to “Top 5 Drop Down Horizontal Menu Widget for blogger”

  1. Sir मैंने ब्लॉग में पहले कस्टम CSS कोड जोड़ा उससे पुराना मेनु बार रिमोव हो गया फीर नीचे दिया कोड html widget में एड किया। शायद आपने मेरे ब्लॉग को खोलकर नहीं देखा। सबकुछ ठीक सेट हुआ है आपके दिये मेनू बार में about और contact us मेनु बोक्स से बाहर आ रहें हैं। कृपया ब्लॉग खोलकर देखें।

  2. Sir आप मेरे लिए इतना समय दे रहे हैं मै कभी चुका नहीं पाउंगा। आप मेरे ब्लॉग को फिर से देखें। डेस्कटॉप भीव में ठीक है लेकिन मोबाइल भीव में अबाउट और कॉन्टक्ट मेनु बोक्स से बाहर आ जा रहे हैं। अगर उसमें पांच आइटम नहीं आते हैं तो चार ही सेट कर दिजिए।
    🙏धन्यवाद🙏

    1. Dhirendra ji humne aapko ek css code email ke jariye diya hai usay bhi use kare taki menu bar mobile device par show na ho. Agar ye menu mobile par show hoga to mobile design kharab lagega.

  3. Sir आप मेरे ब्लॉग को देखें सबसे उपर वाले मेनु बार जिसमें (फेसबुक, ट्विटर आदि) हैं उसे वहां से डिलीट कैसे करें बतायें फीर वहीं पर मैं आपका बताया मेनु बार Style : 3 कैसे लगायें इसकी पुरी जानकारी ईमेल द्वारा या कैसे भी देने की कृपा करें।
    धन्यवाद

  4. Sir मैंने Style : 3 को टेस्ट किया अब भी कुछ गड़बड़ी है। अबाउट और कॉन्टक्ट बोक्स से बाहर आ रहे हैं कृपया आप मेरे ब्लॉग को देख लें। मैं अपना url दे रहा हूँ।

  5. Sir मैने मेनु कोड को बिना एडिटिंग किये ब्लॉगर ब्लॉग में टेस्ट करने के लिए लगाया तो कोड सो हो जाता है। मेनू नहीं बन रहा है।
    बिना एडिटिंग किए नहीं होता है क्या ?
    धन्यवाद

    1. Sahi kaha aapne, code me kuch error thi jiski wajah se menu ki jagah code show ho raha hai. Humne code ke sabhi error ko resolve kar diye hai, aap code ko copy karke fir se try kare. Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.