Create a Drop Down Menu In Facebook Style With Rounded Borders

The Drop Down Menu code that I provided earlier can be used as a structure to design any navigation menu you like. I have designed a drop down menu using Facebook as inspiration. You can fully customize this menu and can add colors and fonts of your preference too. The new thing about this menu is that it also contains a sub drop down menu and all menus have rounded borders. So now you organize your pages even more beautifully. I have made the installation even more easier. If you use the watermark template or any other Blogger Designer Template then you must read the post below after applying this tutorial,

Facebook Drop down menu

Live Demo

Adding The Drop Down Menu To Blogger

     1.   Go To Blogger > Design and select a HTML/JavaScript widget

      2. Paste the following code inside it,

<style>
#mbtnavbar {
    background: #3B5998;
    width: 100%;
 
    color: #FFF;
        margin: 10px 0;
        padding: 0;
        position: relative;
        border-top:0px solid #960100;
        height:35px;

}


#mbtnav {
    margin: 0;
    padding: 0;
}
#mbtnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbtnav li {
    list-style: none;
    margin: 0;
    padding: 0;
      
}
#mbtnav li a, #mbtnav li a:link, #mbtnav 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;

}
#mbtnav li a:hover, #mbtnav li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 11px 12px;
      
  
      
}

#mbtnav li {
    float: left;
    padding: 0;
}
#mbtnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbtnav li ul a {
    width: 140px;
}
#mbtnav li ul ul {
    margin: -25px 0 0 161px;
}

#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
    left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
    left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
    position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav 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;

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


#mbtnav li li li a, #mbtnav li li li a:link, #mbtnav 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;
  
  
}
#mbtnav li li li a:hover, #mbtnav li li li a:active {
    background: #627AAD;
    color: #FFF;
    display: block;
}

</style>
<div id='mbtnavbar'>
          <ul id='mbtnav'>
            <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>
               
   <ul>
                    <li><a href='#'>Sub Sub Page #1</a></li>
                    <li><a href='#'>Sub Sub Page #2</a></li>
                    <li><a href='#'>Sub Sub Page #3</a></li>
                  </ul>

</li>
                  </ul>
            </li>

          </ul>
        </div>

 

The colors and font family and size can be changed in the same way as in the previous post. The only thing you need to understand is how to control the number of link lists. The code in purple is responsible for the appearance of the first drop down menu and the highlighted yellow code controls the sub drop down menus. If you wish to increase or decrease the number of tabs then simply add or remove a code like this,

<li>

<a href="#">Tab Name</a>

</li>

Where # should be replaced with Page Link and the corresponding text should be replaced with the Tab name.

I will creating more menus using the same HTML structure. The above code is created without using any Jquery, Images or scripts. It is pure CSS and html and it will help you speed up your website load time too. Feel free to ask for any help if needed.

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

23 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Assalam Waalekum bhai.....
    kaaise h aap?

    Bhai mujhe ek rating widget chahiye aapne blog k liye... Jo har post k niche rhe aaur visitors us post ko vote kre.....

    ReplyDelete
  2. Hi Mohammad,

    hw r u doing, plz send the latest brown color template to wewantjagan at gmail dot com i look forward to hearing for your reply. thank u

    ReplyDelete
  3. @shadab

    Ok buddy I will publish it soon. :)

    @BSR
    I am fine friend. How are you? Long time since you last commented. :>

    I will send you the template soon.

    ReplyDelete
  4. what an awesome navbar mohd_,i will sure apply it...
    and one thing more plz mohd tell me if i want to shift my labels and comments below the read more image one by one,what changes should i do,plz look at my blog www.krackoworld.com and tell me by commenting.

    regards
    karan chauhan

    ReplyDelete
  5. I don't know where to put that code in my html, can you clear it?

    ReplyDelete
  6. @Faisal
    W.salam
    I am afraid with my current schedule I can answer problems related to the post only brother. I hope you understand.

    @Karan
    copy the labels and comment code from above data:post.body and paste it just below it.

    @Joe
    Go To Blogger.com > Design > Page Elements and select a HTML/JavaScript widget. PAste the code inside this widget. That's it.

    ReplyDelete
  7. hi,

    how do i move the words, "Home", "about", "contact", "sitemap" to the center of its navigation bar?

    ReplyDelete
  8. its very useful to my blog

    thanks for this code

    its really nice

    ReplyDelete
  9. Thanks, the codes work perfectly on Google Chrome and Firefox, but when I view it with IE, the submenus will disappear when my mouse is moved away from the main menu.

    Appreciate your help on this. Thanks.

    ReplyDelete
  10. Thanks Its Working and Looking too cool

    ReplyDelete
  11. Yes you told that you are ready to help so now
    i try to use dropdown menu but it is not working
    i found this massage
    Page not found
    Sorry, the page you were looking for in the blog www.robinskhatiwada.blogspot.com does not exist.
    Go to blog homepage

    ReplyDelete
  12. assalam bro,

    i tried DROP DOWNMENU N FB TYPE DROPDOWN BOTH BUT FACING SAME PROBLEM. MAIN MENU COLOR IS REMANING WHITE.

    PLZZ GIVE SOLUTION SOON...

    REFER: www.findmyshoppe.in

    ReplyDelete
  13. Hi Mohammed,
    I have the same issue as EvanLuLu... looks great in Firefox and Chrome, but the submenus are hidden behind the posts in Internet Explorer. I've tried changing the z-index, but no luck.
    Please help! Thanks :)

    http://whylovesd.blogspot.com

    ReplyDelete
  14. thanks a lot... its very helpful
    visit my blog...
    http://mediafiremovieloverz.blogspot.com/

    ReplyDelete
  15. assalam friend, why is the dropdown menu hidden behind my blogpost when hovered

    please help
    assalamualaikom

    ReplyDelete
  16. Hi Mohammad, there appears to be a slight problem. Whenever I add a URL link that has a capital letter, the link no longer works - it only seems to accept lower-case letters, not capitals. Is there any way around this, some of my links have capitals in them.

    Thanks :)

    ReplyDelete
  17. why is it only works on the widget .. not the same as in the FB. I mean to stick on the screen exactly as in the FB

    ReplyDelete
  18. hello friend.. i tried this..but i cant remove if i dont need code.. showing Invalid widget: HTML4

    Error 400
    how can i remove this widget from my blog?
    will you help me please

    ReplyDelete
  19. This comment has been removed by the author.

    ReplyDelete
  20. I added this to my blog but the drop down keeps cutting off!

    ReplyDelete
  21. is working perfectly on Firefox, cometbird, Torch, Google chrome, safari but not on IE, can some one help me with the information on how to make work on IE?

    ReplyDelete
  22. Thanks for sharing! May God Bless You!

    ReplyDelete
  23. same problem aslam sub sub menu not appearing

    ReplyDelete