Create a Drop down Menu in Facebook Style

Posted by : ADMIN Monday, 5 September 2011

Previously, I had shared a article about the drop down menu, the complete article can be read from here. But now I am very glad to introduce the tutorial which is same as the drop down menu but in Facebook Style. Background color and text color can be easily change by your preference. It is also contain sub drop down menu which make it more professional. So now ready to organize your pages more beautifully. So lets start to add this gorgeous drop down menu in the template.

1.Login to Blogger Dashboard.

2.Go to Design / Page Element.

3.Add HTML / JavaScript widget.

4.Place following code within it.

<style>

#bitnavbar {
    background: #3B5998;
    width: 100%;

    color: #FFF;
        margin: 10px 0;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;
}

#bitnav {
    margin: 0;
    padding: 0;
}
#bitnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#bitnav li {
    list-style: none;
    margin: 0;
    padding: 0;

}
#bitnav li a, #bitnav li a:link, #bitnav li a:visited {
    color: #FFF;
    display: block;
   font:bold 12px Helvetica, sans-serif;
   margin: 0;
    padding: 9px 12px 11px 12px;
        text-decoration: none;
        border-right:0px solid #627AAD;
}
#bitnav li a:hover, #bitnav li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 11px 12px;



}
#bitnav li {
    float: left;
    padding: 0;
}
#bitnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#bitnav li ul a {
    width: 140px;
}
#bitnav li ul ul {
    margin: -25px 0 0 161px;
}
#bitnav li:hover ul ul, #bitnav li:hover ul ul ul, #bitnav li.sfhover ul ul, #bitnav li.sfhover ul ul ul {
    left: -999em;
}
#bitnav li:hover ul, #bitnav li li:hover ul, #bitnav li li li:hover ul, #bitnav li.sfhover ul, #bitnav li li.sfhover ul, #bitnav li li li.sfhover ul {
    left: auto;
}
#bitnav li:hover, #bitnav li.sfhover {
    position: static;
}
#bitnav li li a, #bitnav li li a:link, #bitnav li li a:visited {
    background: #EDEFF4;
    width: 120px;
    color: #3B5998;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 1px 0 0 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border:1px solid #ddd;
-moz-border-radius:4px;
-webkit-border-radius:4px;

}
#bitnav li li a:hover, #bitnav li li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;

}

#bitnav li li li a, #bitnav li li li a:link, #bitnav li li li a:visited {
    background: #EDEFF4;
    width: 120px;
    color: #3B5998;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border:1px solid #ddd;
    margin: 1px 0 0 -14px;

}
#bitnav li li li a:hover, #bitnav li li li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;
}
</style>
<div id='bitnavbar'>
          <ul id='bitnav'>
            <li>
              <a href='#'>Home</a>
            </li>
            <li>
              <a href='#'>About</a>
           </li>
            <li>
              <a href='#'>Contact</a>
            </li>
      <li>
               <a href='#'>Sitemap ▼</a>
                <ul>
                    <li><a href='#'>Sub Page #1</a></li>
                    <li><a href='#'>Sub Page #2</a></li>
                    <li><a href='#'>Sub Page #3</a>