Animated CSS3 Multi Drop Down Menu For Blogger

Advertisements

Beauty is the key component of a blog this is the reason why most of blogger always wishes to make their blog as eye-catching as possible. To craft their blog looks more astonishing they take help of different widgets resembling Featured Posts, Image Gallery and etc. If we go deeper, we will come across this conclusion that usually majority of Blogger pays no concentration to their CSS Drop Down Menus. Therefore, their blog not only remains short of ideal appearance but also fails in providing user-friendly experience to visitors. So today we will insert Animated CSS Drop Down Menu in blogger. This astonishing Drop down menu is created by Catalin Rosu with spectacular JQuery effects! We will be sharing a customized version which works flawlessly with blogger. It purely represents true supremacy of CSS3 with the combination of JQuery. This widget will make your Blogger Blogspot blog outlook more fashionable and attractive. So instead of waiting lets startworking!!!

I am certain you will adore previewing this CSS3 Menus, so first let us look at its live demo.


Features Of CSS3 Drop Down Menu:

It is one of the greatest CSS3 Drop down menu as it has heaps of handsome new features which make it unique from all menus. Let us look at few of its features.
  • Easy to use, Optimized with CSS3
  • Speedy, No compromise in blog speed
  • Stunning Multi Drop Down Menu
  • Optimized with stunning Animated JQuery Jumping drop down effect
  • Supports PC, Mobile phones and iPad
  • Editing coding as easy as ABC

How To Add Animated CSS3 Drop Down Menu In Blogger:

To add this widget in Blogger simply Follow these steps
  • Step# 1: First Go to Blogger.com >> Your Blog 
  • Step# 2 Now Select Layout >> Add a Gadget (the place where you want to insert your drop down menu).
  • Step# 3 Then Click on HTML/JavaScript >> and then just Paste the following code.
<!--MBL Animated CSS3 Multi Drop Down Menu For Blogger-->
<link rel="stylesheet" type="text/css" href="http://mybloggerlab.com/StyleSheet/MBLNAV.css"/>          


<nav id="mbl-menu-wrap">    

<ul id="mbl-menu">

<li><a href="URL-Here">Home</a></li>



<li>

<a href="URL-Here">Categories</a>

<ul>

<li>
<a href="URL-Here">CSS</a>
<ul>
<li><a href="URL-Here">Item 11</a></li>

<li><a href="URL-Here">Item 12</a></li>
<li><a href="URL-Here">Item 13</a></li>
<li><a href="URL-Here">Item 14</a></li>
</ul>
</li>
<li>
<a href="URL-Here">Graphic design</a>

<ul>
<li><a href="URL-Here">Item 21</a></li>
<li><a href="URL-Here">Item 22</a></li>
<li><a href="URL-Here">Item 23</a></li>
<li><a href="URL-Here">Item 24</a></li>
</ul>
</li>

<li>
<a href="URL-Here">Development tools</a>
<ul>
<li><a href="URL-Here">Item 31</a></li>
<li><a href="URL-Here">Item 32</a></li>
<li><a href="URL-Here">Item 33</a></li>
<li><a href="URL-Here">Item 34</a></li>

</ul>
</li>
<li>
<a href="URL-Here">Web design</a>
<ul>
<li><a href="URL-Here">Item 41</a></li>
<li><a href="URL-Here">Item 42</a></li>
<li><a href="URL-Here">Item 43</a></li>

<li><a href="URL-Here">Item 44</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="URL-Here">Work</a> 
<ul> 
<li><a href="URL-Here">Work1</a></li> 
<li><a href="URL-Here">Work2</a></li> 
<li><a href="URL-Here">Work3</a></li> 
<li><a href="URL-Here">Work4</a></li> 
            </ul> 
            </li> 
<li><a href="URL-Here">About</a></li>
<li><a href="URL-Here">Contact</a></li>                                                                                                                               <li><a href="http://www.mybloggerlab.com">MyBloggerLab</a>                                                    </li> </ul>
                                                                                                                                           </nav>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('li').has('ul').mouseover(function(){
$(this).children('ul').css('visibility','visible');
}).mouseout(function(){
$(this).children('ul').css('visibility','hidden');
})
}

/* Mobile */
$('#mbl-menu-wrap').prepend('<div id="mbl-menu-trigger">mbl-Menu</div>');
$("#mbl-menu-trigger").on("click", function(){
$("#menu").slideToggle();
});

// iPad
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) $('#mbl-menu ul').addClass('no-transition');      
    });   
       
</script>


Customization:
  • To insert URL according to your choice replace URL-Here
  • Don't forgot to include http://www. before every URL
  • Customizating this widget is very simply but still to make it more easier we have highlighted those elements which need to be changed i.e. URL-Here  Home and ETC.


Step# 4: After customizing your widget just save your template by pressing Save Button

Step# 5: Now go and check your blog you will witness a picture perfect Animated CSS Drop down menu

Remember: For WordPress
If you are thinking to use this CSS3 Drop Down Menu widget on WordPress then you can do it without facing any trouble. All you need to do is to follow the same steps.

From The Editors Desk:

I expect you all would love this widget, and I assure you this CSS3 Menus will never let you down. Still it is the opening we will share more superior optimized CSS menus with enhanced styling and colors, as our main aim is to provide quality widgets. The tutorial is very simply but still if you face any difficulty regarding anything feels free to ask till then Peace Blessings and Happy Optimizing. 

Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

157 comments

May 19, 2012 at 9:04 PM

Jazakallah Sir, I received ur e-mail and I done what you said please also checkout Css3-multi-drop-down-menu is also showing some problem...Peace brother

Editorial Team MOD
May 19, 2012 at 10:57 PM

@Subul us Sallaam
Check Your Email Brother, I Have Sent You a Message. Peace

May 19, 2012 at 11:56 PM

@Syed done..

Editorial Team MOD
May 20, 2012 at 1:10 AM

@Subul us Sallaam
Your CSS3 Menus Are Working Perfectly Now, Check Your Mail :)

May 20, 2012 at 6:07 AM

CooL...Looking Awesome On My Tech Blog... :)

Editorial Team MOD
May 20, 2012 at 6:09 AM

@Prince@Hunk
Thanks Brother For Appreciating. Soon More CSS3 Menus Will Be Released Stay Tuned, Peace

May 20, 2012 at 7:47 AM

Jazakallah brother Faizan it worked thanx you corrected it may Allah's Peace and blessings be upon you =) =)

Editorial Team MOD
May 20, 2012 at 9:15 AM

@Subul us Sallaam
Well May Allah Bless Us All With His Fruits, And Thanks Brother For Giving Such a Kind Response I am Really Blessed To Help you Buddy. If you Have Any Problem Feel Free To Ask, Peace Buddy

Anonymous
May 21, 2012 at 5:43 AM

Your knowledge is amazing to see ..

You will get them the best of God's blessings

Editorial Team MOD
May 21, 2012 at 6:12 AM

@techgod8
Thanks Brother For You Kind Comment, Really Mine Knowledge is Really Small not more then a Peanut. Thanks Buddy. Blessings To you too Buddy. Peace

May 22, 2012 at 3:17 PM

Please help me how can I fix submenu? here is site

http://mojzivotmojblogmojastvar.blogspot.com/

Thank you.

Editorial Team MOD
May 22, 2012 at 8:39 PM

@Admin
Brother I Think You Have Placed This Gadget Under Your Header. Just Try To Arrange It Above Post Body in Layout And Check If the Submenus are Working. If you Having More Problem Feel Free to Ask. Peace

May 22, 2012 at 11:12 PM

I placed it above Blog Posts in layout but still not working, any suggestion ? Thank you

May 22, 2012 at 11:16 PM

Sorry, there is blog problem, wont save me my changes, I'll try another time, it' should work. Thank you!

Editorial Team MOD
May 23, 2012 at 12:57 AM

@Admin
Ya Sure Buddy, You can Try it Any Time, But if you Feel Any Problem Feel Free To Ask..Peace

May 26, 2012 at 10:30 PM

Hey pal isn't this navbar really official!. .I like this navbar a lot and have implemented in my new template release too..




DESIGN MASTER-An Official Template Release

Editorial Team MOD
May 27, 2012 at 12:29 AM

@Vijay Prakash
Hey Buddy. Yes It is Completely Official CSS Menu For Blogger You Can Implement it Any Where you Like. Peace And Blessings Dude

May 30, 2012 at 11:14 AM

hello..n this is a very gr8 nav menu..but please..i really need ur help..i already have a nav menu in my blog..but i wanna replace it with urs..please help me..please!! :(

May 30, 2012 at 11:48 AM

and if u can..the please..i need ur help in one more thing..if u will help me then please reply me back at atiks0786@gmail.com

Editorial Team MOD
May 30, 2012 at 1:08 PM

@atik0786
Thanks Buddy, And For Surly We Will Be Over Joyed To Help You In Replacing Your Old Menu From Our CSS3 Menu.

Well Buddy Why Not, This is the Reason Why We Have Launched Online Live Chat Help SEE THIS FOR MORE. And I Have Send you An Email Check it.. Peace

May 30, 2012 at 7:15 PM

Can you please help me ! The menu bar cover the whole page. How can this be solved ?
Please help me. This is my blog:

http://shiningstarsfootballnewsandupdates.blogspot.com/

THANK YOU !!

May 30, 2012 at 10:55 PM

Thank You.
I've Read ur mail and sent u a reply back.Please read it.n sorry because it too long..lol

Thank You again.
Peace be upon u

Editorial Team MOD
May 31, 2012 at 2:05 AM

@HSEB GUIDES PORTAL!
Hmm Seems like their is some errors in your Template Anyways. Can You Give Your XML Template So We can Help However, Try to Align CSS Menu above Your Post Go To Blogger >> Your Blog >> And Then Place CSS3 Gadget Above The Post. This might Solve the Problem

@atik0786
Brother Check Your Email, Replied...Peace

May 31, 2012 at 3:07 AM

Here's the link of the template that i have used.

http://www.deluxetemplates.net/2011/10/darkness-blogger-template.html/demo/

And placing CSS3 Gadget Above the post didn't made any difference...

Editorial Team MOD
May 31, 2012 at 4:43 AM

@HSEB GUIDES PORTAL
Thanks, Now It Works Perfectly On Your Template See The Live Demo Here

http://mbldarkness.blogspot.com

And Download The Optimized Template From The Following Link

http://mybloggerlab.com/Templates/DarkNess_BY_MBL.rar

If You Have Any Other Problem Use Our Live Chat Support To Get Instant Help. Peace

May 31, 2012 at 6:18 AM

Wow ! really much appreciated !! THANKS VERY VERY MUCH !!

Editorial Team MOD
May 31, 2012 at 8:58 AM

@HSEB GUIDES PORTAL
No Problem, We Feel Really Over Joyed To Help And Motivated Guys Like you. Peace

June 4, 2012 at 8:21 AM

Ok now I am confused. What are the URL's that I need to enter for the tabs to work?

do check and help me with this. And how to center it because the black box takes too much space. :)

http://mamamooh.blogspot.com/

thanks

Editorial Team MOD
June 4, 2012 at 9:46 AM

@Ria D. Laab
To Update URLS Simply Search For URL-Here And replace it with your URL. And As far as placement is concern its perfect no need to change any thing. Peace and Blessings

June 5, 2012 at 7:36 AM

how to change its size
please tell me?

Editorial Team MOD
June 5, 2012 at 10:28 AM

@Hamza Hassan
Brother this widget is designed to get shape of any location. It sets its dimensions automatically so you don't need to edit its width, I Hope that answers your question. Peace and Blessings Pal

Naa
June 9, 2012 at 10:27 AM

hi..i have problem when the sub menu not appear infront, its always stay behind. how do i cope this problem? Thanks in advance

Editorial Team MOD
June 10, 2012 at 1:29 AM

@Norazlina Abdullah
Thanks, I Think You have Not Arranged CSS Menu Properly Give your Blogger Template so We can Help you More Properly. Contact us via Contact.mybloggerlab.com . Peace and Blessing Buddy

June 11, 2012 at 3:06 PM

Here is the link to my blog

http://rockcrunch.blogspot.in/

and i have posted three menu bars one below the other. everything works fine, but i want
to remove the gap inbetween those 3 menus. Is there some way you could help me remove that space in between the bars?
Thank you! :)

June 11, 2012 at 3:14 PM

i forgot to mention my email id in the previous comment

www.rockcrunchblog@gmail.com

please email me a solution soon! thank you! :)

June 11, 2012 at 9:17 PM

The drop down meny appears when i add it on my blog, how do i feed in the details for the specific subpage to open

cheers
merwyn
merwynsrucksack@gmail.com

Editorial Team MOD
June 12, 2012 at 12:12 AM

@Team rockcrunch
Brother, To do So you Either need to give me the Template or Give me Admin Privilege. Then We Will love to Help you regarding this Problem.

@Merwyn Rodrigues
Brother After Placing it on your Blog Search for "URL-Here" now after searching it According to your need add your URLS. Usually we use Labels to Link are Blogger Categories. Peace and Blessings

June 12, 2012 at 3:26 AM

ok i have sent you the email. please check your inbox
thank you for the quick reply! :)

Editorial Team MOD
June 12, 2012 at 6:30 AM

@Team rockcrunch
Brother I have Replied Back Check it. And Provide the Complete Template in XML format. Peace and Blessing Dude.

June 13, 2012 at 3:48 AM

ok i have sent it in xml format! ty :)

July 5, 2012 at 10:41 PM

Can I ask some help? There's a problem with my drop down menu.. when I point my mouse pointer to the menu with other links.. the submenu wouldn't show up infront :(

here's my blog
http://ragnanotes.blogspot.com/

hope you could help me :(

July 11, 2012 at 10:49 PM

As you told, I placed this gadget above the Blog Posts. Its working but overwriting other gadgets. Help required.

Blog address:
http://editupwithtemplate.blogspot.in/

Editorial Team MOD
July 12, 2012 at 12:25 AM

@Admin Raizah
I Think mate You have changed the CSS Menu which doesn't belong to us, While it works perfect.

@Vinod Pawar
Mate your Search Box is Mixing with the CSS menu Try to Low down your Search Box This will Easily resolve the Issue. Peace and Blessings

July 12, 2012 at 1:47 AM

Hi Friend, Can I ask the same help which Admin Raizah asked as well. When I pointed it is not showing any submenu, but i can feel that is showing but hidden behind the screen. Not sure how to fix it.

My blog is http://www.seleniumautomationhelp.blogspot.co.uk/

I added menu. so when we hover over it .. it changes the colour and i can see there is something shown at the bottom . and I need it to visible for the user.Kindly help me.

Also, Is it possible to get rid of te black colour background of that widget.

Editorial Team MOD
July 12, 2012 at 4:02 AM

@Anantha Ramakrishnan
We have Just Replied to your Email, Follow the Instructions. We are certain It would work.

July 12, 2012 at 7:40 PM

Thank you for the kind reply. Did what you said, but still it overwrites other gadgets on or a column partition line. Please suggest how should I move it upside or align that it should overwrite any of gadgets.
Thank you.

July 12, 2012 at 7:41 PM

*align that it should not overwrite any of gadgets.

Editorial Team MOD
July 13, 2012 at 12:55 AM

@Vinod Pawar
Brother you need to place Search box below the CSS3, If you unable to do it yourself then Email us your Template we will do it for you. Send it at contact.mybloggerlab.com Peace and Blessings

July 13, 2012 at 8:35 PM

Thank you brother. :) Message sent.

Anonymous
July 14, 2012 at 1:30 AM

nice menu thanks....^__^

July 15, 2012 at 11:21 AM

Thank you! Got your mail. Really helped me out. Keep working. Your genius.

Editorial Team MOD
July 15, 2012 at 11:27 AM

@Vinod Pawar
Thanks Brother For Liking our Services. We Will try to Maintain that reputation. Hope Every Thing is perfect on your Template. Peace and Blessings

July 20, 2012 at 10:20 PM

Please let me know how to get drop down menu top of all posts?? Thanks!

Editorial Team MOD
July 21, 2012 at 12:59 AM

@Sachith Anuradha
Simply Place a gadget above thee posts in the Blogger Layout and Paste the Code there. Hope that answers your question. Peace and Blessings

July 21, 2012 at 9:51 PM

Can you please check at http://sihinakade.blogspot.com/
There is a problem at "Dhamma" tab. Adding another tab, it may go under the gadget at side bar.

Thanks.

July 21, 2012 at 9:55 PM

Also can you tell me how to change the font color of selected tab to orange color.

Thanks!!

Editorial Team MOD
July 22, 2012 at 2:04 AM

Brother If you will add new Category to the Navigation Menu it is pretty clear that it will go down Because you can see the CSS3 menu is fulled with Tabs.

Editorial Team MOD
July 22, 2012 at 2:07 AM

Brother the Style Sheet of this CSS3 Menu is kept under the link http://mybloggerlab.com/StyleSheet/MBLNAV.css Just Copy the whole text inside this link and then modify according to your Needs then Paste it in the Style Sheet of your Blogger Template. Hope that Answers Your Question.

MKK
July 25, 2012 at 3:59 PM

hi bro i used it for my blog www.mufcdevils.com

for few days it worked really superb but now it show as a list with dots

please tell me the solution or gave me a new one please

kami.mian@gmail.com

Editorial Team MOD
July 26, 2012 at 1:57 AM

Brother I checked your Blog its working perfectly. Try To Clear your Cookies your Change your Browser Became sometime Cookies ruins the experience. Peace and Blessings

July 26, 2012 at 9:59 AM

Hi I would like to adjust the width on the widget menu. Please advice. Here is my blogspot: http://cy-closet.blogspot.com/

Anonymous
July 27, 2012 at 7:01 AM

hi my drop down menu hiding at the background of Post.?

Editorial Team MOD
July 27, 2012 at 8:39 AM

if you want to edit the width then Simple go to this link http://mybloggerlab.com/StyleSheet/MBLNAV.css copy all the CSS details, Edit it according to your needs. Peace and Blessings

Editorial Team MOD
July 27, 2012 at 8:39 AM

Don't paste the coding in the Layout, Just paste it in your template then it will not get hide behind the Post background. Peace

Anonymous
July 27, 2012 at 11:16 AM

iam facing the same problem either...could you please help ... even after doing as you said....... could you mail the detailed instruction for makeing it look great...
priyatham456@gmail.com

thankyou..

July 29, 2012 at 7:58 AM

Can you guide me where can i edit the width of the menu? start from this line --> #mbl-menu?

Editorial Team MOD
July 29, 2012 at 8:46 AM

Go To this File http://mybloggerlab.com/StyleSheet/MBLNAV.css (The CSS File) Then Search For 960px When you Find it just change the Pixels and Done!!! Peace and Blessings

Editorial Team MOD
July 29, 2012 at 8:48 AM

Hey Priyatham Soon We will Going to Release a Complete Tutorial Till Then Stay Tuned!!

July 29, 2012 at 9:04 AM

I did the changes of the width. but nothing changes after save in blogspot. Or am I placing wrong content of MBLNAV.css? Please guide. Thank you

Editorial Team MOD
July 29, 2012 at 9:17 AM

Brother First Copy the Whole Thing in MBLNAV.CSS in your Blogger Template where you Place your Stylesheet. Then Do Changes Save the template. Now Remove the http://mybloggerlab.com/StyleSheet/MBLNAV.css From your Template now it will work.

July 29, 2012 at 9:38 AM

Yes, the changes successfully. Thx very much for the guide. Another 1 more problem. When I placed the menu below header, the design of menu is different and unable to view the sub menu item.However, when place in below menu. the design is same as your demo and able to see the sub menu. Any guide of that? Please review my blospot: http://cy-closet.blogspot.com/ for more detail. Thank you

Editorial Team MOD
July 29, 2012 at 9:46 AM

Seems Like their is Some Problems with the Template. Just Send your Template in XML Format @ contact.mybloggerlab.com and we will handle everything!. Peace and Blessings

July 29, 2012 at 9:55 AM

What template you want and where can I retrieve the template that you mean? Please guide. Actually I'm using Google blogspot to do my website. I do not have any coding inside except yours menu coding.

July 29, 2012 at 10:09 AM

How to send the template to you? Send in by using XML file? Do you have email?

Editorial Team MOD
July 30, 2012 at 8:26 AM

Just Sent your Email Address with contact.mybloggerlab.com and we will let you know about our personal email Where we can carry on with the CSS3 menu Problem

August 2, 2012 at 5:58 AM

hi bro. i wana kno that. how to create a subpage for describing any topic with text in another page and how to write text in it. in blogger can i do it by html bt how ?? plz bro reply me

Editorial Team MOD
August 2, 2012 at 7:02 AM

Brother You Just Need To Insert one link in a Specific Page which will take users to Other Page Using Anchor Text. Yes You have to Use HTML. There is a Option in Blogger Text Editor Called "LINK" Or "ADD OR REMOVE A LINK" Just Press it and enter the Text and Link. Hope that Helps Peace and Blessings!!

pra
August 5, 2012 at 9:18 AM

how to set custom lenth for menubar

Anonymous
August 9, 2012 at 12:33 AM

Hi The Drop down menu is hiding behind the post. what to do. where to add z-index value. http://www.wingsoffirevb.blogspot.com

Editorial Team MOD
August 9, 2012 at 3:31 AM

Brother You are adding the CSS Menu in Add A Gadget Section. Please insert the Coding in your Template then it will surly work Perfectly.

Editorial Team MOD
August 9, 2012 at 3:33 AM

http://mybloggerlab.com/StyleSheet/MBLNAV.css << From Here you can Get the Style Sheet and can Do Whatever you Like.

August 21, 2012 at 8:37 AM

hi brother The Drop down menu is hiding behind the post as you have mentioned above that add it in a gadget i had done that but no vain.if i paste the code in template then please tell me the place or tag in template to paste it...

September 2, 2012 at 9:01 PM

How i can change drop down menu background color it show black i want to show blue how i can do it?
my site: http://www.dewdropzone.blogspot.com

Editorial Team MOD
September 2, 2012 at 11:44 PM

Brother in your Template After Header use this coding then it will not hide. Peace

Editorial Team MOD
September 2, 2012 at 11:49 PM

All the Style Sheet CSS is Present in
http://mybloggerlab.com/StyleSheet/MBLNAV.css
so you can simple copy it and can customize accordingly. Peace

September 4, 2012 at 1:39 AM

Thanks Bro It's awesome Widget I like the Widget v.much thanks for The Sharing This Widget.... !!! :D

September 4, 2012 at 4:27 PM

Hey Syed,
Nyc work you r doing here, used ur navigation on my blog but its not showing submenu's when placed at the header part, My Menu's are long so putting it above the blog post isnt that attractive (Though submenus can bee seen here). I would be grateful if you can help me out, my blog is techinfong.blogspot.com. Let me know how to give u admin privledge if u need it to help.

September 5, 2012 at 4:16 PM

For everyone trying to get the submenu's to show, i just got mine to work after reading through the css code, what you just meed to do is very simple, go to template designer>> Advanced >> add CSS and paste

.tabs-outer {
overflow: visible;
}
the code in blogger's template sets that to hidden thereby blocking off anything thats longer than its borders. if this was helpful then check out my blog in a few days and give ur input (Still startying to set it up cuz i'm new to blogging). techinfong.blogspot.com

Editorial Team MOD
September 6, 2012 at 12:35 AM

Thanks For Sharing the Tip Really Appreciate it. Peace

September 8, 2012 at 2:44 AM

No Animated CSS3 Multi Drop Down Menu appears after I try, maybe I was wrong to apply!! hmmm ... I think the css code you provided is not complete, please give complete css code, I want to try the Multi Drop Down this ... peace :) allah bless u

Editorial Team MOD
September 8, 2012 at 4:13 AM

Dude As you can Seen on Demo it is Multiple And Works Perfectly. Retry, it will work. Peace And CSS is Complete.

September 8, 2012 at 12:19 PM

Hey man, there's no problem with anything whatsoever, i think the problem comes from where you placed the drop down menu, naturally most people put it a the header/tabs section, but the problem with this is that bloggers default template, hides the overflow if placed in the tabs section, the way to work around this is through the code mentioned earlier, but in a situation whereby u didnt place d menu in the tabs section, that code becomes useless, so i'll advise you move your menu to the sidebar first and check if it dropsdown, and if it doesnt, then there's a problem with the code, and if not, you should try placing the navigation somewhere else, you could see an example on my blog techinfong.blogspot.com, i placed mine at the very top before the tabs.

Editorial Team MOD
September 8, 2012 at 2:49 PM

Yes, Now I Get you what you are actually trying to Say. Actually users have to Place this CSS3 MENU either above/below their Header. So We will update the method in 24 Hours. Peace and Blessings

September 8, 2012 at 8:55 PM

Good to see how much you follow up with ur readers, is there anyway u could help me check out what's wrong with a feature in the template i'm using? if you can let me know, so i'll send it to you. Thanks

September 10, 2012 at 9:03 AM

Excellent Stuff from you man.Kepp doing this great job.I Love your Blog.Many Blessings to you brother.
http://onlinesoftweb.blogspot.com/

Editorial Team MOD
September 10, 2012 at 9:23 AM

Sorry For the Belated Reply. Yes I already checked your blog Few days back and i appreciate it is designed very well. Keep it up. Peace

September 13, 2012 at 4:51 AM

this is not working in internet explorer please tell me solution!

Editorial Team MOD
September 13, 2012 at 4:53 AM

Brother Currently Our Server is Being Updating that Why Some Scripts have stopped working. Keep the Coding Same and Recheck it after Few hours it will work on each and every browser

September 13, 2012 at 5:19 AM

but working in google chrome fine.

Editorial Team MOD
September 13, 2012 at 5:22 AM

Because Chrome has Catched the HISTORY thats why its working. don't worry it will be fine. Peace

September 13, 2012 at 5:27 AM

please tell me how it works in i.e.

September 13, 2012 at 5:34 AM

you are telling right

Editorial Team MOD
September 13, 2012 at 5:36 AM

Just Wait it will be fine. Peace

Editorial Team MOD
September 13, 2012 at 6:49 AM

Brother, The server is updated now Clear your cookies and try it will work. Peace

September 14, 2012 at 5:17 AM

CAN THIS WORK IN NAV BAR

SB MENU NOT APPEAR IN NAV BAR TELL ME HOW IT WORKS IN NAV BAR

IT WORKS WHEN IT PLACE JUST ABOVE POST

Editorial Team MOD
September 14, 2012 at 5:37 AM

Place the CSS menu coding After your Head Wrapper. Peace

September 14, 2012 at 11:46 AM

Error parsing XML, line 1152, column 23: The entity name must immediately follow the '&' in the entity reference.


when i am pasting code in template after header

Anonymous
September 15, 2012 at 12:54 AM

Hi! This is shaily.. Can we change the color of this drop down menu

Editorial Team MOD
September 15, 2012 at 12:55 AM

Brother Don't Paste the Whole Code Paste it From till <nav> . While paste the remaining coding in your Add a Gadget >> HTML/JavaScript Area. Peace

Editorial Team MOD
September 15, 2012 at 12:57 AM

Hey! All The CSS Style sheet coding is present in the >>> http://mybloggerlab.com/StyleSheet/MBLNAV.css <<< You can customize it accordingly. Peace and Blessings

Anonymous
September 16, 2012 at 7:26 AM

THE SUB MENU ITEMS ARE GOING BEHIND THE POST, EVEN AFTER ADDING THE CODE AFTER (<HEAD) OR (<HEADER) FROM TEMPLATE SHOWING "Error parsing XML, line 83, column 21: The entity name must immediately follow the '&' in the entity reference" ERROR! http://ebanglabooks.blogspot.com this is my blog. what should i do brother? need your support ASAP!

September 19, 2012 at 7:18 AM

how can i change the navigation bar size..bcz its can't fit in my blog
plzz tell me http://moviz-spot.blogspot.in/

September 24, 2012 at 9:29 PM

Thank you so much for this post! I'm helping a friend update her blog and I've been able to customize the CSS to get the look I wanted. I love it! I'm at the point where I'm testing in different browsers and I came across 3 issues and I don't know where to look to make edits to the CSS. How it appears in Firefox is how I want it to look & behave.
1) In Explorer, the drop downs are showing up with almost a transparent background (I can see the post's text behind them); 2) in Explorer the drop down happens so quickly that I can't hover or pick a choice; 3) Safari: I view the web version and I can't hover or click on any of the items in the menu. My test blog is here: http://practicedailygratitude.blogspot.com/
Thank you so much!

Editorial Team MOD
September 25, 2012 at 1:08 AM

You can Easily Edit the width by Customizing the Style Sheet Located Here http://mybloggerlab.com/StyleSheet/MBLNAV.css

Editorial Team MOD
September 25, 2012 at 1:12 AM

Thanks For liking, Yes you are quite Correct this CSS3 Menu is designed and optimized for Google Chrome that might be the reason why you are getting errors. Don't worry our best team is working to make things better. Will let you know very shortly. Peace and Blessings

September 26, 2012 at 8:15 AM

Thanks very much Syed. I love the way it looks, and I was really excited that with my minimal knowledge I was able to get it exactly how I wanted it for Firefox & with the way it works (only creating an html webpart and updating the CSS and not messing with the template itself), I'm just not skilled enough to figure out where to change the pieces of code for IE. Thanks in advance for any help you can provide : )

September 30, 2012 at 12:59 AM

This looks absolutely great...have been looking for ages for drop down menu for blogger.
however when I hover over menu drop down bar doesn't appear, using safari, also firefox, still no sign...can you help? Thanks in advance and well done!

September 30, 2012 at 1:00 AM

Forgot website...http://www.billionjournal.com/

Editorial Team MOD
September 30, 2012 at 1:40 AM

Try applying the Coding in Template, it will work fine.

September 30, 2012 at 7:24 AM

Thanks Syed, sorted it, brilliant!!!;)

October 6, 2012 at 8:16 AM

The menu appears with my links but the dropdowns don't show. Do I need to enable something first.

Anonymous
October 11, 2012 at 8:35 PM

Read the post on your blog for drop down menu on this url

http://www.mybloggerlab.com/2012/05/animated-css3-multi-drop-down-menu-for.html

i'm trying to apply it on my blog....but the drop down menu goes behind the post...so how to fix it??

Secondly where i have to add this code...?? In templete(if yes then where) or as a html/javascript gadget?? pls revert back with a reply .

Editorial Team MOD
October 12, 2012 at 12:04 AM

Try Adding it in Template

Editorial Team MOD
October 12, 2012 at 12:05 AM

Sorry, The Article is bit old that's why it is confusing. You have to insert all the coding in template to make it working properly. We will soon update this article. Peace

October 12, 2012 at 11:12 PM

hi friends, I want to ask how to make popular on my bloggerlab like you and whether it could be in my templete, thanks to the info

Editorial Team MOD
October 13, 2012 at 2:44 AM

Hey, Yes Buddy. Every Template has its own Popular Post Design. Just go To Blogger >> Your Blog >> Layout >> Add a Gadget >> From the List Select Popular Posts >> Save it. And Done, Done. Hope that Helps. Peace

October 19, 2012 at 9:42 AM

Assalamu'alaikum brother

I had tried your code and everybody code and it doesn't seem to work ? Please help my website is http://agarwoodindonesia.com

October 22, 2012 at 3:33 AM

its not working properly in my blog coul be plzz help me in this

October 22, 2012 at 3:40 AM

its now showing down option in my blog http://msyedrocks.blogspot.com/

Editorial Team MOD
October 22, 2012 at 8:14 AM

Dude, Apply the Coding in Your Template not in your Gadget Area. If you want us to edit your theme Send you Template AT Contact.mybloggerlab.com in XML Format. Peace and blessings

Editorial Team MOD
October 22, 2012 at 8:22 AM

Dude, Apply the Coding on your Template Rather then copying it in a Gadget. It will work thats for sure. Peace

November 6, 2012 at 1:31 PM

I am still facing some problems. As I am unable to know that how to decrease the width of the Menu and I am having further problems too.
Figure these out for me please.
JAZAAK ALLAH.

November 6, 2012 at 5:29 PM

Hi, after I paste the code. it doesn't work. I can see navigation bar. The menu bar don't be dropped down. Can you tell me how?

Editorial Team MOD
November 6, 2012 at 11:51 PM

If you want to change any kind of Style Sheet CSS then Edit
http://mybloggerlab.com/StyleSheet/MBLNAV.css << This file according to your desire needs. Peace

Editorial Team MOD
November 6, 2012 at 11:52 PM

Well, Could you please provide your website URL so we can check what is the problem. Peace

November 8, 2012 at 9:21 PM

Working Fine: SO easy and fast. Thanks and Keep it Up

November 10, 2012 at 11:08 AM

hi syed
i have tried a new templet on my blog and after that some of the gadgets are not removing from sidebar.
please help how to remove it mumbai-eye.blogspot.com is my blog

Editorial Team MOD
November 10, 2012 at 11:14 AM

There is a Simple Solution to This. Follow the Steps Mentioned Below.

1.Go To Blogger.com >> Template >> EDIT HTML Proceed.
2.Search For locked='true' (it will be more then 1)
3.Now Replace TRUE to FALSE (Repeat the Process).
4.Save Your Template
5.Go To Layout Now You can Remove any Widget :)...

November 10, 2012 at 11:35 AM

thanks syed can you pls tell some templet website which provide basic templet but good look

Editorial Team MOD
November 10, 2012 at 11:36 AM

Yeah, We have Created a Freshable Blogger Theme That is Awesome try it out.

Check it Here
http://www.mybloggerlab.com/2012/09/mbl-freshable-magazine-themetemplate.html

November 11, 2012 at 7:31 AM

mine is not working...dropdown menu is hiding..how to solve pliz help

November 12, 2012 at 9:50 PM

Hi Syed, I have tried many drop down's, my problem is that the menu does not drop for my blogger...Can you please help me out? Thanks a lot...

Editorial Team MOD
November 12, 2012 at 11:50 PM

Apply this coding not in the Gadget Area. Apply it in the template it will work. Peace

November 15, 2012 at 8:49 PM

its not working.. the drop down menu is hiding all the time.. i try to put it in the gadget under the header.. its hiding.. i try to put it in the template before ]]> its not even working and i try to put it after header in the template.. it said that the code is wrong.. so i pretty much kinda give up now.. too bad cause i really love this one.. but since its not working... im going back to my old drop down menu :(

Editorial Team MOD
November 16, 2012 at 4:28 AM

Ok, Provide us your Template in XML Format. We Will Integrate it in your theme. Peace

Editorial Team MOD
November 16, 2012 at 4:29 AM

Ok, Provide us your Template in XML Format. We Will Integrate it in your theme. Peace

Anonymous
November 16, 2012 at 2:32 PM

my slideshow has stopped working after this drop down :( kindly help.

Anonymous
November 16, 2012 at 2:34 PM

http://regnumfinancials.blogspot.com/ this is my blog

ss3-multi-drop-down-menu is also showing some problem.

Editorial Team MOD
November 20, 2012 at 12:45 AM

I can't find the coding on your blog?

i have problem when the sub menu not appear infront, its always stay behind. how do i cope this problem

November 21, 2012 at 9:02 AM

how to provide u my template.. i mean.. where should i send it too ?
my email is vmzone@ymail.com
many thanks

November 21, 2012 at 9:31 AM

i send message through livezilla.. and i provide the xml code there.. dont know if u get it or not.. thanks

November 27, 2012 at 11:00 PM

hye Syed Faizan...it seems the drop down not working properly...the sub menu always appear behind the post...what should i do now?please help me....

http://www.smksantubong.com/

February 15, 2013 at 1:16 AM

Hoh did you make all of this awesome stuff??

Anonymous
July 10, 2013 at 2:03 PM

http://engineering-study-india-to-usa.blogspot.in/

I have implemented things exactly the same way as you have mentioned.

I think the drop down from the menu's is happening. BUT, its taking effect in the background.

How can I solve this problem?

Anonymous
July 10, 2013 at 2:03 PM

http://engineering-study-india-to-usa.blogspot.in/

I have implemented things exactly the same way as you have mentioned.

I think the drop down from the menu's is happening. BUT, its taking effect in the background.

How can I solve this problem?

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2018. MBL Networks, All Rights are Strictly Reserved.