LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Navigation Bar / Website / Website Navigation Bar » Stylish HTML-CSS Drop Down Menu For Blog & Website

Stylish HTML-CSS Drop Down Menu For Blog & Website

Stylish HTML-CSS Drop Down Menu For Blog & Website

You can find a lot of different menu styles on the web today. Similarly designers and developers are often more than happy to share their techniques with the world. And through these tutorials new designers can learn about trends and how to build websites semantically.Today, I am Going to posting a article about how to add css Horizontal drop down Menu with sub menu for blogger blog. if you are using blogger platform blog and if you want to add sub-menu for each category this are not available from blogger by default templates. So you can add this hovering Menu which are good and attractive black color.

This is Drop down menu with sub menu that’s are very import to your website because who have a lot of sub categories and sub menu that’s are very useful this widget. Whenever visitor/readers land on any blog/website they browse for more categories or useful information via Menus or Tab Menus or Links widgets. Menu plays vital role for connecting all the content items in single widget make visitors/readers get very easily.

It’s Time To Add Stylish HTML-CSS Without J-Query 5-Level Drop Down Menu With J-Query Effect For Blog & Website To Spice Them Up With Easy To Navigate Your Visitor In A Stylish Way.

You can also use jquery menu but that was so heavy that your blog load timing become so high that visitors leave your website and blog and get angred and never visit your site/blog again, So use Only Css that can be loaded instantly. Get the stylish drop down menu for blogger just in two steps.which is amazing jquery effects contains inside it.

Recommended For You:
Add Stylish Animated Social Sharing Bar Widget To Blogger

Features:

1.) Multi-Level Drop Down Menu With HTML-CSS Only. (No JavaScript Included).
2.) Speed Loading Time Because There Is No JavaScript File.
3.) J-Query Style With JavaScript File.
4.) Simple And Stylish Design With Hover.
5.) Cross Browser But Effect Will Not Work On IE.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.

<style>
#mmenu, #mmenu ul {
margin: 0;
padding: 0;
list-style: none;
}
#mmenu {
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, 0 1px 0 #666 inset;
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
#mmenu:before,
#mmenu:after {
content: "";
display: table;
}
#mmenu:after {
clear: both;
}
#mmenu {
zoom:1;
}
#mmenu 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;
}
#mmenu 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;
}
#mmenu li:hover > a {
color: #fafafa;
}
*html #mmenu li a:hover { /* IE6 only */
color: #fafafa;
}
#mmenu 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-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
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;
}
#mmenu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#mmenu 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);
}
#mmenu 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;
}
#mmenu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#mmenu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#mmenu 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);
}
#mmenu 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;
}
#mmenu 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;
}
#mmenu 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;
}
#mmenu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#mmenu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#mmenu 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;
}
</style>
<div id="mmenu">
<li><a href="#########">Main</a></li>
<li>
<a href=" ######### ">Categories</a>
<ul>
<li><a href=" ######### ">CSS</a></li>
<li><a href=" ######### ">Graphic design</a></li>
<li><a href=" ######### ">Development tools</a></li>
<li><a href=" ######### ">Web design</a></li>
</ul>
</li>
<li><a href=" ######### ">Work</a></li>
<li><a href=" ######### ">About</a></li>
<li><a href=" ######### ">Contact</a></li>
</div>

Customization:

1.) Change The Coloured Text Into Your Desire One….
2.) Done…

NOTE: This Is Single Level Drop-Down Menu, For Multi Level As Shown In Screen Shoot, Please Leave A Comment With Your E-Mail To Get It.

Recommended For You:
Top 7 Blogging Mistakes That You Should Avoid

You Like It, Please Share This Recipe With Your Friends Using...

160 Responses to “Stylish HTML-CSS Drop Down Menu For Blog & Website”

  1. Thanks. I have two quick questions.
    1) I could see max of one sub menu even if I add more than one. How to resolve this
    2) How can I change borders? I mean, On my blog I am seeing menu options in middle of site. I wanted to move position to left

  2. Satya says:

    Thank you. It worked great. Thanks once again

  3. Allison says:

    Would love multilevel code, and also if they hover over a link on the drop down menu, how can I make another side menu appear?

    zervo024@gmail.com

  4. Jason Morgan says:

    Certainly an article to be read! This was a great and informative read! Fabulous work by the author and creator! Nice feedback from the readers as well! I must admit the author had some very valid points here. Thank you for taking the time to share this with us!
    hail damage dallas

  5. Arsalan says:

    This is awesome Hassan. I am have just started blogging so don’t have much know-how. your Drop-down menu is awesome. Kindly send me multi level drop down menus.My email address is arsalanbaig007@gmail.com

    Regards

  6. hi there! fantastic how-to and very easy compared to other guides. only one question, any idea on how to put it on top of flash? i’m trying z-index and also transparent mode on the flash object but no result unfortunately. see it here http://a-kalyptos.blogspot.com/

  7. found it!

    for anyone with the same problem

    set < param name=”wmode” value=”transparent” /> in the <object AND wmode=”transparent” in the <embed.

    happy blogging!

  8. UnitedIndonesia Samarinda says:

    wow…it worked..finally i found it..
    how can i change the background and the color? my site is white..i just want to change it into white..thanks

    • EXEIdeas says:

      Remove Both Sets Of Lines In The Code And Alt Some Other Codes Too According To Your Background…

      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);

      background: #444;
      background: -moz-linear-gradient(#444, #111);
      background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
      background: -webkit-linear-gradient(#444, #111);
      background: -o-linear-gradient(#444, #111);
      background: -ms-linear-gradient(#444, #111);
      background: linear-gradient(#444, #111);

  9. Vimalrajs S says:

    its realy fantastic… but i need multi level menu kindly send me that menu

  10. Bou Samnang says:

    Can you tell me about drop down menu? I have shared video from youtube to my blogspot, so I can’t see drop down menu, mean cut off some menu on video shared. So how can I solve it?

  11. Bou Samnang says:

    Please see my blogger to see the problem below
    http://newapp4today-ok-bigman.blogspot.com/

  12. Rose Waty says:

    hello hassan im having problem with my drop menu. please see my blog at tudungfabulous.blogspot.com.

  13. Can you provide me a stylish menu according to my website…. at admin@aubsp.com

  14. Anonymous says:

    Thanks so much for your code. Please give me the multi level code. pulsecensor@in.com

  15. ashish says:

    thanx sir.your code is awesome plz give me multilevel code
    kalra.sonu93@gmail.com

  16. Anonymous says:

    hassan,
    Your html code is not being validated by w3c validator, it is giving message that list item is not allowed the way u use it. it is asking for order list or unorder list what i do?

  17. Atif Siddique says:

    Thanks so much for your code. Please give me the multi level code. atifgx@gmail.com

    • EXEIdeas says:

      You Are Welcome…
      Please Check Your E-Mail…

    • Thanks so much for this, i’ve been trying to work this out for absolutely ages!

      Would you be able to tell me how to, a) completely get rid of the border lines between the posts or 2) get rid of just the last one after’shop’ or add one before ‘home’ at the beginning, i can’t work it out and i’m a bit of a perfectionist and its bugging me!

      my url is

      rih–lw.blogspot.co.uk

      Thanks so much,

      Lauren

    • EXEIdeas says:

      You Are Welcome…

      Find And Remove The Next Of “Shop” To Get Rid Off.
      Add The Below Line Before “Home” Line.
      < li>< a href=”#########”>YourTITLE< /a>< /li>

  18. Yadhav Manikanta says:

    hello hassan excellent job i had tried it was working and awesome i am searching for it from few months
    Thanks

    i want multi drop down menu please email me.

    i am waiting for your mail
    my email id is “manikanta1221988@gmail.com”

  19. Anonymous says:

    Your work is very awesome… Please provide this type of menu in two more colors like ‘whitish’ and ‘twitter blue’… actually we tried with those coloe codes… but we failed… some places the effective appearence is missing…

    So my sincere request is please provide the same type of menu in the above mentioned two colors also…

    Thanks & Regards
    Kanth

  20. sir,
    your’s drop down menu is very interesting I would like to get A multi leavel drop down menu. pl send it by mail
    subhashnedumparamb@gmail.com

  21. tpwilliams says:

    Finally a code (THAT WORKS) without needing to upload a bunch of files. Thank you so very much. I would like to know if you would provide the code for the green nav menu on your demo page and add the code for the drop down menu under the second tab? My email is tpwilliams5@gmail.com.

    Thanks!

  22. Anonymous says:

    sir,
    it is not working in ie6 i used the same i didn’t change anything pls tell me its urgent…

  23. Ενωση Απ.Αξ.Αεροπορίας ν.Μαγνησίας says:

    Hi,
    Check my blog here
    eaaavol.blogspot.gr
    my drop down menus are hidden.
    Any idea?

  24. Shahin Ahmed says:

    maybe 6 or 5 months ago i saw a dropdown menu fix on your site. Now i need it. May i get the link of this post? Thank you.

  25. Trine Marie says:

    Hi! I was wondering if I could get the code for the multi-level drop down menu?

    Thank you
    – Trine Marie
    trinemariejohansen@gmail.com

  26. shoyab khan says:

    nice work pls send me multilevel codding on my email

    shoyabkhan123@gmail.com

  27. sundar says:

    Good work i appretiate you. But it seems to be not working in IE browser. Have you checked in IE? If you so tell me the solution. thanks in advance.

  28. Mrs. J says:

    This is great – please send me the multilevel coding
    erinLreeder(at)gmail(dot)com

  29. Sop says:

    thank you,, im using it

  30. dilip says:

    It seems as if your demo link is not working.
    Regards: http://www.blogncash.blogspot.com

  31. asim nawaz says:

    Assalam o alaikum Hassan
    You are really a genious boy and a coder. i am thinking of just one question! how do you these things?
    thanks alot for such codes
    will be waiting for the email.
    thanks
    asimnawaz0842@gmail.com

    • EXEIdeas says:

      Thanks For Your Appreciation, It’s Actually Based Upon CSS:after Effect That Is One Of The Most Important Code In DropDown CSS Menu And Also For Others.

  32. Asim Nawaz says:

    Muhammad Hassan Plz send the code to me at asimnawaz0842@gmail.com. thanks

  33. Jesper Bing says:

    Nice work, very nice drop down menu..

    I want a multi-drop down menu.. Can you help me?

    jesperbing1989@gmail.com

  34. buddy I installed the widget in my demo blog,but it doesn’t come right after my header,it’s lefting a space in the left side of the menu and floting to the right side.check here and plez tell me how to fix it
    “http://demox454.blogspot.com/”

  35. Buddy I solve that problem by myself and installed a new dropdown menu on my blog,but this even doesn’t work perfectly,there am facing a problem in the child menues.could you help me to fix that problem?u can be able to see that dropdown menu and the problem in that on my blog
    http://techtrickhome.blogspot.com

  36. Krishnakumar Chowdary says:

    nice one
    it is useful for my blog.
    thanks for your posting

  37. bhavani charanprasad says:

    sir,

    kindly send me multilevel drop down menu code
    sbcprasad@yahoo.co.in

    thanking you

    sbcprasad

  38. yogesh mandge says:

    Hello Muhammad Can u Please Send Me The Multi Drop Down Menu Code –

    My Email is – Onlinecracker2@gmail.com

    Thanks in Advance !

  39. B. Santhosh says:

    Sear Sir,
    I am using Awesome inc Template for my blog. But this code is not working properly for my template. Please check this issue.

  40. hello bro i wanna your type drop down menu but i have some problem . http://rajsthanguid.blogspot.in/ go on blog plz watch what is problem in drop down menu . Plz reply me here ..me urgently waiting .

  41. Bro Sorry I was Replace but its not working.If you have any solution Give me .Plz plz plz

  42. I am Newbie i dont know how to send xml template on comment but bro my template name is ”simple-view-blogger-template”. i send you downloading link http://www.dailybloggertemplates.com/2012/07/simple-view-blogger-template.html please wacth and give me solution …

    • EXEIdeas says:

      There Are Two Template In This Pack, One Is WithSlider And Another Is Simple.
      But Both Files Contain Pre-Built Codes That Are Matching With This Style So You Personally Use The Pre-Added MenuBar Because It’s Cute.

  43. Bro Salaam i don’t understand what are you saying …just tell me real solution …i wanna your type drop down menu but its not work fully .. i also comment on your page .Please tell me what i do or give any your tutorial for this please reply.

    • EXEIdeas says:

      It’s Difficult Because It Have Same ID Tags As Your Template Have, Use Other Template Or Other Menu Bar. It Can Be Fix But Requires Time.

  44. Thanks bro i will wait for your reply but i wanna only this drop down menu …thanks again

  45. Anit Sharma says:

    i want two or three level dropdown menu. please mail me the code.
    my email id is:

    sachinagrawal16@ymail.com

    Thanks in Advance.

  46. sadman says:

    Cool tutorial i have found a website with good menu bars and other css designs you may like the designs.

    http://freebietemplate.com/css-designs/css-designs.html

    have a nice day

  47. Fantastique Gallery Online says:

    Thanks. Works great.

  48. Anonymous says:

    THANKS FOR SINGLE DROP DOWN PLZ SEND ME MULTIDROP DOWN
    MY EMAIL IS :SAMEERDSPORTSMAN@GMAIL.COM

  49. Rebie Gutierrez says:

    Thanks for sharing the drop down menu code.it saves lot space. can you please be kind enough to send me the code of multi drop down menu. my email is jumbo3220@gmail.com 🙂

    Keep up your good work.
    cheers
    Rebie

  50. PowecomARS Rental says:

    Wow,great content and your blog template is so beautiful. Is this template free or not. If so, would you please share this template? if not, how much does it cost? Thanks a lot!

  51. Great work. I need the multi drop down menu. please..
    downloadslocker7@gmail.com

  52. Anonymous says:

    Beautiful Drop down! Elegant in it’s simplicity! could you please send me the multilevel drop-down? I would really appreciate it. Thank you so much! Adam adamwar@earthlink.net
    Please Notify me.

  53. TeeTee X says:

    Hi.
    This is such a great drop down menu. Thank you so much for this.
    But I have got one problem. I tried everything but I still can’t see submenu (dropdown menu).
    Can you help me, please?
    Thanks.

  54. Narayan Chandra Maria says:

    hi hassan sir ,
    i have created 2 web page and i want to hyperlink together in pages but how ?

  55. Sathya says:

    Now i got what i searching for few days but i need one clarification. Can i set this menubar as fixed on the top of my website?

  56. Tine says:

    I would love to have the 5 level code. Would you please help me! 🙂

  57. Marcos says:

    Would love multilevel code, and also if they hover over a link on the drop down menu, how can I make another side menu appear?

  58. Ashish Shrivastav says:

    I want multi level DropDown Menu

  59. Talat says:

    Welcome here and thanks for liking. Just check your email for the menu bar code…

  60. TsuKa says:

    Can you send me the css code for mutil level drop menu (>2)? I need it for my blog! You can send to my email (tsugumikaoru@gmail.com) It will be help… thanks before

  61. soufiane says:

    i need multi level
    thanks before

  62. Ketan patel says:

    it’s good to be here and read some interesting posts , i got very useful information over here thanks for sharing it .

  63. amit says:

    it’s great just want a little help on how to adjust the length of it because it exceeds too long

  64. abah says:

    i’m interested to multi dropdown. this my mail : cakgonkarlos@gmail.com
    thank you

  65. Naveen says:

    please send me multilevel dropdow as above example

  66. Naveen kumar says:

    sir i am not able to align menu bar to left of my blog please check it and help me my blog address is sfdc2019.blogspot.com.
    Thanking you

  67. Excellent work! I am impressed and good luck to you at all times. Would love to see your article to be continued.

    • EXEIdeas says:

      Welcome here and thanks for reading our article and sharing your view. This will be very helpful to us to let us motivate to provide you with more awesome and valuable content from a different mind. Thanks again.

Leave a Reply

Your email address will not be published. Required fields are marked *