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.

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.

• Bounce rate kam karne ke 51 popular tarike.
• Hosting plan kaha se kharide ?
• Blog traffic badhane ke 111 popular tarike.

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 ?

Step : 1

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

Step : 2

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

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

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

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

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

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

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.

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