Show Mobile Navigation
,

Add a Blue Professional Dropdown Menu in Blogger

Hemant Verma - 12:36 PM

Drop down menus are very important in blogging and these kinds of stuff is also considerable for the visitors be'coz visitor when firstly see your menus and other widget and if he like that then she/he wish to visit again itself and content also very important fro the every blogger.





Add Blue Drop Down Menu

  • Login to Blogger > Dashborad
  • Click on Drop Down Menu and select Layout
  • Add a HTML/JavaScript Gadget
  • Paste below code in it.

<style>

/* Blue Dropdown Menu by www.widgetgenerators.blogspot.com */
#nav {
display:inline-block;
width:100%;
margin:0px auto;
padding:0;
background:#335599 url(http://2.bp.blogspot.com/-FVx5AvxIkpg/TzP9VsBWmrI/AAAAAAAAAVk/5D5V1QHAhOQ/s320/bg-ABT.png) repeat-x 0 -110px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav li {
margin:10px;
float:left;
position:relative;
list-style:none;
}
#nav a {
font-family:verdana;
font-weight:bold;
color:#e7e5e5;
text-decoration:none;
display:block;
padding:8px 20px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, .7);
}/* selected menu element */
#nav .current a, #nav li:hover > a {
background:#7788aa url(http://2.bp.blogspot.com/-FVx5AvxIkpg/TzP9VsBWmrI/AAAAAAAAAVk/5D5V1QHAhOQ/s320/bg-ABT.png) repeat-x 0 -20px;
color:#000;
border-top:1px solid #f8f8f8;box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
-moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
background:none;
border:none;
color:#000;
}
#nav ul li a:hover {
background:#335599 url(http://2.bp.blogspot.com/-FVx5AvxIkpg/TzP9VsBWmrI/AAAAAAAAAVk/5D5V1QHAhOQ/s320/bg-ABT.png) repeat-x 0 -100px;
color:#fff;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}#nav ul li:first-child > a {
-moz-border-radius-topleft:10px; /*some css3*/
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
-moz-border-radius-bottomleft:10px; /*some css3*/
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}/* drop down */
#nav li:hover > ul {
opacity:1;
visibility:visible;
}
#nav ul {
opacity:0;
visibility:hidden;
padding:0;
width:175px;
position:absolute;
background:#aabbcc url(http://2.bp.blogspot.com/-FVx5AvxIkpg/TzP9VsBWmrI/AAAAAAAAAVk/5D5V1QHAhOQ/s320/bg-ABT.png) repeat-x 0 0;
border:1px solid #7788aa;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);-moz-transition:opacity .25s linear, visibility .1s linear .1s;
-webkit-transition:opacity .25s linear, visibility .1s linear .1s;
-o-transition:opacity .25s linear, visibility .1s linear .1s;
transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
float:none;
margin:0;
}
#nav ul a {
font-weight:normal;
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
left:160px;
top:0px;
}

</style>

    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">HTML / CSS</a></li>
                <li><a href="#">JS / jQuery</a>
                    <ul>
                        <li><a href="#">jQuery</a></li>
                        <li><a href="#">JS</a></li>
                    </ul>
                </li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">MySQL</a></li>
                <li><a href="#">XSLT</a></li>
                <li><a href="#">Ajax</a></li>
            </ul>
        </li>
        <li><a href="#">Resources</a>
            <ul>
                <li><a href="#">By category</a>
                    <ul>
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">MySQL</a></li>
                        <li><a href="#">XSLT</a></li>
                        <li><a href="#">Ajax</a></li>
                    </ul>
                </li>
                <li><a href="#">By tag name</a>
                    <ul>
                        <li><a href="#">captcha</a></li>
                        <li><a href="#">gallery</a></li>
                        <li><a href="#">animation</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="http://www.widgetgenerators.blogspot.com.com">FAQ's</a></li>
    </ul>

  • Save your widget.


 Make Changes....!

  • Replace it # with your link.
  • Replace all Green Area with your showing menu name.



If Any Problem Comes, Ask in Comments


83 comments:

  1. Hey Hemant, this is really very nice. thanks for sharing bro.

    www.NewBloggerTips.com
    My Recent Post:- Advanced Popup Facebook like, Twitter follow & Email Subscription Box Widget

    ReplyDelete
  2. there is a problem..i cant see the drop down menu..any ideas??

    ReplyDelete
  3. Replies
    1. This comment has been removed by the author.

      Delete
    2. Hello Hemant Varma !
      There is a problem with drop down menu can't see the drop down menu .

      Please help!

      Delete
  4. @Hemant Verma
    www.epirusblog.blogspot.com
    it must be something with position i thing..the problem is that the menu is being hiding by article frame..

    ReplyDelete
  5. @Epirusblog ioanninaok you could use the iframe to show this OR send me your template I'll try to do it for you.

    ReplyDelete
  6. send your email to give you my template...thanks my friend you are very kind!!!

    ReplyDelete
  7. @Hey,
    Epirusblog ioannina
    Search for this in your template (1st Expand Widget Templates):
    "b:section class='header' id='header' maxwidgets='1'"

    now change the value of maxwidgets to 2 or 3 ..

    Then next below search
    "<b:widget id='Header1' locked='true'"
    and change the value of true to false !
    That's it!

    Regards,
    Check My Blog: http://bhejamatpaka.blogspot.com

    ReplyDelete
    Replies
    1. Hi! Md Azeem
      Your trick really helped...thanks a million bro...

      Delete
  8. Did what "Md Azeem" says and still not seeing the dropdown menu. I had to add this

    z-index:100;

    in this part of the code

    #nav li {
    margin:10px;
    float:left;
    position:relative; z-index:100;
    list-style:none;

    Menu show completely, except in IE. Is there a way to make it work for IE also

    ReplyDelete
  9. Sorry if you want to have a look at the issue, please look at my test page here - http://test3normz.blogspot.ca/

    Thanks

    ReplyDelete
  10. @Normand BoulangerBro it's also working perfect in the Live Demo sitw as you gave it.

    and codes are also same which you gave. Hope you understand it.

    ReplyDelete
  11. Thank you so much for this! Extremely helpful! I too am having problems seeing the drop down menu but at least I have the first headings there so I'm very happy. Do you have any advice on why I can't see the drop down list? http://ilovethatfilm.blogspot.co.uk/

    ReplyDelete
  12. @Pete TurnerSir you are using simple blogger template and i have noticed that there is some problem in this template so i think u should change it.

    ReplyDelete
  13. @Hemant Verma What template would you recommend please?

    ReplyDelete
  14. @Pete TurnerDownload this awesome template.

    http://www.blogiri.com/2013/03/download-my-blogger-tricks-new-template.html

    ReplyDelete
  15. @Normand Boulanger
    sorry, if you didn't find dropdown there.
    But, in my blog it workd fine...
    Be, sure that you added codes perfectly....
    and if it didn't show...place your menu bar above of header...

    If it works please do visit my tips&tricks for blog

    ReplyDelete
  16. mene drop down menu create kiya after the us menu me mujhe contain add karna ho to

    ReplyDelete
  17. Thank you for this helpful post bro! Indeed it's very interesting. :)
    Bloggerjin

    ReplyDelete
  18. there is a problem..i cannot see the drop down menu because its show behind the blog posts...any ideas?

    ReplyDelete
  19. there is a problem..i cannot see the drop down menu because its show behind the blog posts...any ideas?

    ReplyDelete
  20. hemant verma that is very useful, Thank you man !

    ReplyDelete
  21. hey a cant see the drop down list my site is www.exhibitionevent.com
    user eventsorg24@gmail.com
    pass: solsdigi123

    ReplyDelete
  22. how can i add articles in different menues ple help

    ReplyDelete
  23. Hi, thank for the very nice blog!! I posted the codes to my blogger. The scroll down menu worked for a while; but then it stopped working. The drop down items are blocked.

    My URL is http://theamazingfoodie.blogspot.com/

    Your help would be much appreciated!

    ReplyDelete
  24. @pratikyou have to create different menus for each post.

    ReplyDelete
  25. Hemant can you help me http://earningjobsnetwork.blogspot.com/ in my blog menu is not working correctly

    ReplyDelete
  26. thanks i edited it and now its working fine

    ReplyDelete
  27. Thanks admin for your nice post it is really good but in my blog it is on small problem when ever you click on menu to see sub menu all other menus are looking transparent and when you click on submenu menu is opening please help me to solve the problem .
    thanks in advances
    please see the blog www.drarifabid.com

    ReplyDelete
  28. @abdul basit
    hi bro,
    how it worked to your blog . with coding you changed please tell us .
    in that temple it not working . please share with us how i will work.

    ReplyDelete
  29. hello ,
    please check my blog : http://top-paying-site.blogspot.com/
    my drop down menu is not working . what should i do?

    ReplyDelete
  30. sir it is also not working on my blog. iam unable to see drop down list. mpz help me

    ReplyDelete
  31. Hi,how to change the blue color of menu bar. Plz reply soon??

    ReplyDelete
  32. @gurmeet kaurReplace this color code from above codes with your own color code.

    #335599

    Use our Color Code Generator and paste your fav color on menu.

    ReplyDelete
  33. Hemant ,hi my blog is http://coolbloggertools.blogspot.com
    can you tell me how to make clone of any template
    thanksClick here to see my blog

    ReplyDelete
  34. @Abhishek kakkarFirst Create a Blank Template then Paste CSS and JavaScript Correctly and then paste Body part of particular template. It's all about design in the cloning.

    ReplyDelete
  35. Hi; I made it but I have two problem. First the dropdown list is behind the posts the second there are only two category appeared on the menu beside I wrote six

    My blog adress is www.isveiscidavalari.com

    Please give me an advice

    Thank you

    Eren Evren

    ReplyDelete
  36. @eren evren

    No need to look at because I changed the menu

    ReplyDelete
  37. kindly helpout with that template as well as this menubar.. !!
    i wish to get that correct template.the menubar is pretty cool in that.

    ReplyDelete
  38. Hi, I want this menu bar. Please help.
    http://orderhappiness.blogspot.in/

    ReplyDelete
  39. hi, i like your blog very much...

    i tried this trick on my <a href="www.awatravels.com>blog</a> but something is not right.. the sub-menu is behind the main post OR something like that.. what should i do?

    here is my screenshot
    http://2.bp.blogspot.com/-rQGcFNDB2zY/Uf1tnUFS0RI/AAAAAAAAACM/TnU19hOa974/s1600/menu-error.jpg

    thanks very much

    ReplyDelete
  40. Has anyone found a solution to the submenu links that are hiding behind the blog body?

    I am using a simple template and was hoping that I could still use this dropdown menu without having to change that.
    Thanks,
    Erika

    URL:

    www.bisbocciabroad.com

    ReplyDelete
  41. Bro. I have no drop down/ i can't see drop down. But you said see "Drop Down" help. This is my blog. I like to add the drop down menu. Thanks
    http://muangguite.blogspot.com/

    ReplyDelete
  42. Hi..
    This post is really very helpful. It worked for me. But the look is lil clumsy. Plz check my blog n tell me what I should alter, in order to get a nice look.
    My Blog : http://bankexamguide4u.blogspot.in/

    Thank U.. :)

    ReplyDelete
  43. hello friend i just copy the html coding and edited according to my blog but the drop down box is not at all extracting and i think its my mistake and i again copied the html coding and pasted it in my blog without any editing and now also i didnt open the drop down menu and friend this site is very help full for me 2 create the blog and please help for this drop down menu

    ReplyDelete
  44. after adding code just horizontal menu only appearing ,drop down appeared like hidden,pls solve this

    ReplyDelete
  45. It's looks like more beautiful thank you giving this drop down menu.

    ReplyDelete
  46. @Tech Gadgets News Blog

    hey did you use the same coding as above? i saw its working perfectly for your blog..

    ReplyDelete
  47. brother my posts are covering my drop down box please can u help me to fix it
    tell me how ?????

    ReplyDelete
  48. entire navigation menu looks awesome but i want to add search box at the tail of this navigation menu. So is it possible and if it is than please give me your suggestions for that.

    ReplyDelete
  49. Hello Hemant, thank you for your post, it is very useful. But I have a problem with sub-menu. Could you visit my blog
    http://romavoice-mjmcommunication.blogspot.it
    I saw your comment about downloading a new template, but I would like to know whether I can add the subtitles to the existing template. Thanks in advance.
    Mathew

    ReplyDelete
  50. The menu does not open fully in blogger. what should I do for this problem?
    thanks

    ReplyDelete
  51. The menu does not open fully, what should i do for this problem?

    ReplyDelete
  52. The dropdown menu is not opening fully, rather its getting blocked within the bar. what could be the problem ?

    ReplyDelete
  53. hi!
    its not working properly.................
    siddhuthefighter.blogspot.in

    ReplyDelete
  54. I was just searching for this info for some time. After 6 hours of continuous Googleing, finally I got it in your website.
    http://www.smartdunya.com/

    ReplyDelete
  55. I'm having trouble with menus in my blogger blog. The menus look fine if I put them at the bottom of my layout. But if I put them at the top of my layout, then they get cut off, the text gets cut off, like its not tall enough. Do you know what is going on?
    Thanks!

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

    ReplyDelete

  57. sir my drop down sub menu not visible completely they may hidden like rainbow please solve my problem

    ReplyDelete
  58. Thanks so much! I have been looking for some thing like this for quite awhile Mine is not going all across my blog like yours is. I would like to also Thanks so much! make it a sticky menu, just like yours.

    ReplyDelete
    Replies
    1. The good thing about this navigation menu is, It is fast loading and designed in such a way that it will surely increase conversion optimization of my blog. I will be glad to use it for my blog. Thanks for sharing this ultimate piece.

      Delete
  59. yey got it! thanks :)
    fantasiaguilty.blogspot.com

    ReplyDelete
  60. Holy crab this is what i search a long time ago. Thanks!
    http://slaygame.blogspot.com/

    ReplyDelete
  61. Thanks for posting such a valuable post. I tried it with a normal HTML file. Its working fine there. But when i tried to put that in my blog, The drop down items are not displayed. I have tried many ways but i couldn't do so. Please suggest any help that can solve out this problem. Your help will be appreciated.
    www.pulokeshroy.in

    ReplyDelete
  62. Hi Trying to use this widget but not working as in yours ..i want drop down showing up in layers getting getting hidden
    can u suggest how to trouble shoot?

    http://pakistanisuitswholesaler.blogspot.in/

    ReplyDelete
  63. Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic.

    load bank hire & generator maintenance

    ReplyDelete
  64. How do I increase the width of the menu 110% (wider) but retain CENTRE-alignment so that the whole menu bar does not shift to the right (does not become off-centre)?
    Thanks. Good job done!

    ReplyDelete

You may use these HTML tags and attributes: <a href="" title=""> </a> <b> </b><strong> </strong>

 



Make Your Blog Like a Pro
About | Contact | Affiliates | Privacy Policy | TOS