Monday, June 4, 2012

Attractive Css Drop Down Menu Bar For Blogger

This is a another cool menu bar to your blog.
Drop down menu is the main thing that helps
to increase the attractive of your blog.You can
link with main Categories, pages, and important
posts,with  menu bar.Hence, its easy to navigate
visitors thought this menu bar.This is great design
with Css. you ca do with easy steps. Follow these
steps to add it your blog.


1. Log in to blogger account and Go to Design >> Edit HTML
    (make sure backup your template first)

2. Put checked marked in Expand Widget Templates

3. Find this tag by using Ctrl+F    ]]></b:skin>

4. Paste below code Before ]]></b:skin> tag

Attractive Css Menu
#hb-menu, #hb-menu ul {
margin: 0;
padding: 0;
list-style: none;
#hb-menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
#hb-menu:after {
content: "";
display: table;
#hb-menu:after {
clear: both;
#hb-menu {
#hb-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
#hb-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
#hb-menu li:hover > a {
color: #fafafa;
*html #hb-menu li a:hover { /* IE6 only */
color: #fafafa;
#hb-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
#hb-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
#hb-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
#hb-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
#hb-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
#hb-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
#hb-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
#hb-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
#hb-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
#hb-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
#hb-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
#hb-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
#hb-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;

5. Now Find this code  by using Ctrl+F <div id='content-wrapper'>

6.  Paste below code Before <div id='content-wrapper'> code

<ul id="hb-menu"> 
<li><a href="#">Home</a></li> 
<a href="#">Categories</a> 
<li><a href="#">CSS</a></li> 
<li><a href="#">Graphic design</a><ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>   </li> 
<li><a href="#">Development tools</a></li> 
<li><a href="#">Web design</a></li> 
<li><a href="#">Work</a></li> 
<li><a href="#">About</a>
<li><a href="#">CSS</a>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>

<li><a href="#">Graphic design</a></li> 
<li><a href="#">Development tools</a></li> 
<li><a href="#">Web design</a></li> 

<li><a href="#">Contact</a></li> 
<li><a href="">Add This  »</a></li></ul>

*Replace # With your URL
*Replace Name with as your like.

7. Now save your template
 you are done.


  1. Great, smooth menubar thx...

  2. menubar! it. So, how to add glares in sidebar like yours

  3. @Anonymous



    Thanks, whats did you mean about es in

  4. i meant the sidebar content separator images....How to remove or add them. Actually I want to remove them from post area and add new separators to sidebar.

  5. how to set it on top of the content sheet this is how it appears now-- '' and this is how i want it to be -- ''

  6. @korer
    i will make a post about it. keep in touch.

  7. @Anonymous
    let me know your blog address first ?? i will give a new code to you.

  8. Nice menubar. But why can't find the second code details in my blog?

  9. @tabak
    Can i know your Blog address, I will help you to add it.

    I did it: the CSS code copied for above ]]> and the HTML code copied Go To Design > Page Elements > Click Add a Gadget...looks like this!

  11. @Tabak
    "This blog is open to invited readers only"
    So, i cant Look at your blog.

  12. Sorry,I changed the setting. This is just a test blog..

  13. @tabak, This menubar not support simple template.
    Try with layout template like "minima".
    Im sorry about it.

  14. second instuction to finding (div id='content-wrapper'> is pain for any custom blog template user...juz paste the code using html/javascript gadget....since i'm using custom template, i've use this method and its work fine

  15. Thanks a lot for your valuable guidance.

    I pasted the first set of code as instructed.

    After that, I pasted the second set of code in a HTML gadget of my blog.

    Now, the issue I am facing is that the menu bar and its sub tabs are not showing up properly.

    Request yout o knodly help me out with this.
    Thanks in advance.

    My Blog link is:

    Please suggest!

  16. I cannot give solution without checking it,
    Did you remove Menu-bar?

  17. My submenus aren't showing at all... Here's my blog address:

  18. Hi there. Luv your menu but can't seem to work with my blog so i neeed heeelp with it. the css doesn't work :(

  19. Hi Love this menu too but sub-menus are not showing, pls help.

  20. @Cosmin Stefan Modoran
    Contact me via "Contact Us" page.