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.
Table of Contents
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.
thanks
You Are Welcome…
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
Ok, I Will Check That And Tell You Later Untill Read This Post.
MultiLevel DropDown Floating Menu WithOut J-Query (Only HTML-CSS)
https://www.exeideas.com/2013/02/multilevel-dropdown-floating-menu.html
1) Check You E-Mail For 5 Level Drop Down Menu.
Screen Shoot Is Available On Top.
Thank you. It worked great. Thanks once again
You Are Welcome…
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
Check Your E-Mail For 5-Level Multi Drop-Down Menu.
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
Thanks…
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
Wow…you replied quickly.I was really happy to see 5 levels Drop Down Menu…Thanks alot 🙂
Thanks Bro, Please Check Your E-Mail…
You Are Welcome…
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/
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!
Thanks For Helping Others…
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
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);
its realy fantastic… but i need multi level menu kindly send me that menu
Please Send Me Your E-Mail Via Contact Form Or Comment.
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?
Videos Are Embossed Generally, So We Can Not Set It Behind.
Please see my blogger to see the problem below
http://newapp4today-ok-bigman.blogspot.com/
Please Give A Space Between Your First Video And The Menu Bar So It Can Work Easily…
hello hassan im having problem with my drop menu. please see my blog at tudungfabulous.blogspot.com.
Use z-index:999999; To Bring It Up…
THANKS….
You Are Welcome…
Can you provide me a stylish menu according to my website…. at admin@aubsp.com
Have A Look On The Lab And Tell Me Your Desire…
exeideaslab.blogspot.com
Thanks so much for your code. Please give me the multi level code. pulsecensor@in.com
You Are Welcome…
Please Check Your E-Mail…
thanx sir.your code is awesome plz give me multilevel code
kalra.sonu93@gmail.com
You Are Welcome…
Please Check Your E-Mail…
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?
Can You Send Me The Complete Message With That Line No Or The Link To CSS Validator.
Thanks so much for your code. Please give me the multi level code. atifgx@gmail.com
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
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>
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”
You Are Welcome…
Please Check Your E-Mail…
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
This Is Available In This Theme Only, Please Be With Us For The New Theme…
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
Thanks…
Please Check Your E-Mail…
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!
Orange Green Hover Simple Menu Bar
sir,
it is not working in ie6 i used the same i didn’t change anything pls tell me its urgent…
This Is Only For moz-webkit-transition Supported Browsers…
Hi,
Check my blog here
eaaavol.blogspot.gr
my drop down menus are hidden.
Any idea?
Use z-index:999999; In The CSS Of Menu List…
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.
Here Is It: Multi Level Drop-Down Menu
It’s not that one. Just i need the fix. Okey I’m telling you my problem if you can please help me. My dropdown menu working fine but when i open it on internet explorer it’s does not work. please help me . Sorry for bad english.
Please check>> http://download-free-games4pc.blogspot.com
Bro cau you help me? Waiting for your reply
It’s Not For IE…
Sorry…
Hi! I was wondering if I could get the code for the multi-level drop down menu?
Thank you
– Trine Marie
trinemariejohansen@gmail.com
You Are Welcome…
Check Your E-Mail…
nice work pls send me multilevel codding on my email
shoyabkhan123@gmail.com
Thanks,
Please Check Your E-Mail…
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.
You Are Welcome And It’s Not For IE As Mentioned Above…
This is great – please send me the multilevel coding
erinLreeder(at)gmail(dot)com
Thanks, Check Your E-Mail Now…
thank you,, im using it
You Are Welcome…
It seems as if your demo link is not working.
Regards: http://www.blogncash.blogspot.com
It’s Working Fine, Try Again.
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
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.
Muhammad Hassan Plz send the code to me at asimnawaz0842@gmail.com. thanks
Yes
Do You Want 5-Level DropDown Menu Code…???
Check Out Your E-Mail…
Nice work, very nice drop down menu..
I want a multi-drop down menu.. Can you help me?
jesperbing1989@gmail.com
Thanks For Visiting, Check Your E-Mail…
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/”
Just Minimezed Your Menu Width From 960 To Your Template Size.
done,but still there is a littlegap on the both sides of the menu bar.Couldn’t be it same size as header,just like this blog?
For This Purpose, You Have To Edit Your Menu DIV Of Your Template…
Would you plez help me to do that?I don’t know that how to do this?
Please Provide Your Blog XML File At Our EMail..
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
Yeh, It Error. Just Send Me Your XML Template File To Fix It…
I just send the .xml file on admin@exeideas.tk.hope you got it,now plez fix the problem at your earliest.I need it as soon as possible.
thnx
nice one
it is useful for my blog.
thanks for your posting
You Are Welcome To Visit Us…
sir,
kindly send me multilevel drop down menu code
sbcprasad@yahoo.co.in
thanking you
sbcprasad
You Are Welcome, Check Your E-Mail…
Hello Muhammad Can u Please Send Me The Multi Drop Down Menu Code –
My Email is – Onlinecracker2@gmail.com
Thanks in Advance !
You Are Welcome, Check Your E-Mail…
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.
Can I See Your Blog URL And What’s The Error?
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 .
You Messed Up Our Code, Replace It With Our Above Code And Then Leave Your Problem…
Bro Sorry I was Replace but its not working.If you have any solution Give me .Plz plz plz
Send Us Your XML Template To Check This Error.
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 …
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.
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.
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.
Thanks bro i will wait for your reply but i wanna only this drop down menu …thanks again
I Am So Busy So I Can’t. Don’t Want For Me. Use Some Other Way Or Change The Template…
i want two or three level dropdown menu. please mail me the code.
my email id is:
sachinagrawal16@ymail.com
Thanks in Advance.
Check Your E-Mail And Leave Your Views…
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
Thanks For Liking And Leaving Some Others Cool Stuff For Our Viewers…
Thanks. Works great.
Welcome Here And Thanks For Using It, Be With Us To Get More…
THANKS FOR SINGLE DROP DOWN PLZ SEND ME MULTIDROP DOWN
MY EMAIL IS :SAMEERDSPORTSMAN@GMAIL.COM
Thanks For Liking It, Check Your E-Mail For Multilevel DropDown…
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
Welcome Here And Thanks For Liking, Check Your E-Mail To Get The New Code, Be With Us To Get More…
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!
Welcome Here And Thanks For Liking Here Is Our Template Free For Everyone: Gray-Mania: A Free Pro-Blogger Template
sir plz send me compelete tempelate
malikcomputers4u@gmail.com
Send. Just Check Your EMail…
Great work. I need the multi drop down menu. please..
downloadslocker7@gmail.com
Thanks For Liking Our Work. Check Your E-Mail For MenuBar…
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.
Welcome Here And Thanks For Linking. We Have Sent The MenuBar To Your EMail. Please Check There…
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.
I’m using it on my blog – http://teetees-books.blogspot.cz/ . I’ve seen the demo already, but still i don’t know what to do.
Thanks for your answer.
Check Out The DEMO, Its Working Fine. Where You Are Using It?
Thank you so much! Finally it works^^
Have a good time.
Don’t Add It In Any Widget. Add It Directly To Your Blog Template.
You Are Welcome…
hi hassan sir ,
i have created 2 web page and i want to hyperlink together in pages but how ?
Send The Pages To Our Email And Explain Me There. Will Reply You There.
cva429@gmail.com
Do You Want 5-Level DropDown Menu Bar?
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?
Yes, You Can Fix It Anywhere…
I would love to have the 5 level code. Would you please help me! 🙂
Welcome here and thanks for liking. Just check your email for the menu bar code…
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?
Thanks for liking. We sent menu bar over your email so check your email now…
I want multi level DropDown Menu
Check your email…
Welcome here and thanks for liking. Just check your email for the menu bar code…
Welcome here and thanks for reading our article and sharing your views. Check out your email…
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
Thanks for liking. Now check your email…
i need multi level
thanks before
Welcome here and thanks for liking our code and sharing your view. Check your email for multi level menu bar.
it’s good to be here and read some interesting posts , i got very useful information over here thanks for sharing it .
Welcome here and thanks for reading our article and sharing your view.
it’s great just want a little help on how to adjust the length of it because it exceeds too long
Welcome here and thanks for reading our article and sharing your view. Which length you want to minimize?
i’m interested to multi dropdown. this my mail : cakgonkarlos@gmail.com
thank you
Check Your E-Mail And Leave Your Views…
please send me multilevel dropdow as above example
Check Your E-Mail And Leave Your Views…
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
Your blog is on Google Blogger that has a default padding in the template. Change your template or add custom CSS to re-position it.
Excellent work! I am impressed and good luck to you at all times. Would love to see your article to be continued.
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.