A main feature that's missing in blogger is a drop down menu and although it enables you to use tabs, your still very limited in designing it. A good rule of thumb is to always have a copy of your tempelate before making any changes to it. You can download your tempelate by going to {Design > Edit HTML}. I will show you the easiest step by step instruction for people who have no clue about css or are just beginners. There is a site called pixopoint, and thanks to this website, it lets you to create a drop down in very easy steps and with your own desire!
Once there, you will be able to customize your drop down menu however you like and its very straight forward. You can use the color code to see which code to use for what color (Don't paste the # sign, just the number). After you've done everything you want to go ahead and choose SUBMIT DESIGN, and you will be given a preview of how your drop down menu will look like.
After submitting your design, you will be given a list of css code at the bottom of the page. This will be the design of your drop down menu. Copy the css code, go to {Design > Edit HTML} and paste the code just before the tag. (Use Ctrl + F and put the code in it so that you will find it faster)
]]></b:skin>
Now that that's done, we can begin inserting our HTML so we can actually make the drop down menu work. Go to (Design > Page Elements) and then "Add a Gadget". This is where you enter your basic HTML shown below.
__________________________________________________________________________________
<!--[if lte IE 7]>
<script type="text/javascript" src="http://pixopoint.com/wp-content/plugins/pixopoint-menu/scripts/suckerfish_ie.js"></script>
<![endif]-->
<ul id="suckerfishnav" class="sf-menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Sub link 1</a>
<ul>
<li><a href="#">Sub link 1 extended 1</a></li>
<li><a href="#">Sub link 1 extended 2</a></li>
</ul>
</li>
<li><a href="#">Sub link 2</a></li>
<li><a href="#">Sub link 3</a></li>
</ul>
</li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Sub link 1</a></li>
<li><a href="#">Sub link 2</a></li>
<li><a href="#">Sub link 3</a></li>
<li><a href="#">Sub link 4</a></li>
<li><a href="#">Sub link 5</a></li>
</ul>
</li>
<li><a href="#">Link 4</a>
<ul>
<li><a href="#">Sub link 1</a></li>
<li><a href="#">Sub link 2</a></li>
<li><a href="#">Sub link 3</a></li>
<li><a href="#">Sub link 4</a></li>
</ul>
</li>
</ul>
<script type="text/javascript" src="http://pixopoint.com/wp-content/plugins/pixopoint-menu/scripts/suckerfish_ie.js"></script>
<![endif]-->
<ul id="suckerfishnav" class="sf-menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Sub link 1</a>
<ul>
<li><a href="#">Sub link 1 extended 1</a></li>
<li><a href="#">Sub link 1 extended 2</a></li>
</ul>
</li>
<li><a href="#">Sub link 2</a></li>
<li><a href="#">Sub link 3</a></li>
</ul>
</li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Sub link 1</a></li>
<li><a href="#">Sub link 2</a></li>
<li><a href="#">Sub link 3</a></li>
<li><a href="#">Sub link 4</a></li>
<li><a href="#">Sub link 5</a></li>
</ul>
</li>
<li><a href="#">Link 4</a>
<ul>
<li><a href="#">Sub link 1</a></li>
<li><a href="#">Sub link 2</a></li>
<li><a href="#">Sub link 3</a></li>
<li><a href="#">Sub link 4</a></li>
</ul>
</li>
</ul>
_________________________________________________________________________________
Once you have added the HTML,you can start editing it to your own desire. the "Link" is the head navigation menu, the "Sub link" will be your drop down menu, and "#" will be the link that you will direct the menu to. However you will notice something wrong with the drop down menu. You will see that your drop down menus either go behind your posts or that you can't hover down with your mouse, and there's a really simple fix to this problem. Go to (Design > HTML) and find the tag that's below #suckerfishnav ul.
(Use Ctrl + F and put the code in it so that you will find it faster)
position:absolute;
Right after the semicolon of absolute add the following tag
z-index:100;
<br>
and you want to make sure to add a as many as them until the space between your drop down menu and post is as long as your drop down menu, so that it will not hide behind the post.
Another fix you would want to apply in order to get rid of the sticky menus when you hover in IE is to go to (Design > Tempelate Designer > advanced > add css ) and here you will add the following code,
#suckerfishnav li:hover, #suckerfishnav li.hover {
position:static;
}
If you got lost anywhere, please leave a comment and watch my video tutorial.
Cant get the multi level to work please help
ReplyDeleteit display different fonts in IE, Please help me
ReplyDeletehi, do you know how i could change the font for Arial, round the corners of the navbar to radius 4px, add border/separation between each the main categories and add a search bar inside the nav bar?. Thanks a lot.
ReplyDeleteMy blog is formulesae.blogspot.com
email: gabmass@gmail.com
This comment has been removed by the author.
ReplyDeleteThanks for the tutorial. Really helped a lot. I have a question here. I only want 4 items in main links and i want them to be centered in menu bar instead of aligned to left. Is it possible? thanks in advance.
ReplyDeleteCould you look at my site and tell me why IE won't put the CSS menu above the ads and content? I've tried everything you said....
ReplyDeletehttp://www.jw-archive.org/
Can u tell me how to increase the size of the menu bar so that it fits in the complete page coz nw its a bit smaller from both ends !!
ReplyDeleteThanks very much for putting this up. Your video was really easy to follow. Make more!
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThanks a lot!
ReplyDeletehow do i align the menu bar to center and stretch it to 100%?
ReplyDeleteWorked great. Thanks! Now I am lost. How do I get content in to the menu bar categories and the sub-menu categories? Sorry, I am new at this.
ReplyDeleteyes i got drop down menu but how do i add page in hover link?? please help ! i can't do that...
ReplyDeletelike 'album' is my menu stuff so how can i add some page in this 'album' tab??
see my blog (mineexcercise.blogspot.com...i had done something but it is incomplete. how can i do??
go to my blog and than see once ! you will understand what is my problem. how can i??? mineexcercise.blogspot.com..
ReplyDeleteI made a Menü for my Blog like you described in your Tutorial, but when I visit it with the Internet Explorer my Menü hides behind my Posts. What do I have to do to fix that? When I visit my Blog with Firefox everything looks ok.
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteDropdown Menu CSS Generator?
ReplyDelete[Home][stuff]
******[Another Level]=>[Next Level]=>[Test]
******[Test]***********[Test]********[Test]
******[Test]***********[Test]********[Test]
******[Test]***********[Test]********[Test]
ok ??? ??? XD
youtbue?
HELP!!
Hi! I followed your steps precisely and for some reason the menu is not showing up. I see a box around where it should be. Any suggestions?
ReplyDeletehttp://iamjustgirlintheworld.blogspot.com/
Scratch that.. the menu is there, but you have to mouse over to see the links. Suggestions? :o)
ReplyDeleteHi, how to put some tags to dropdown menu ?
ReplyDeleteSo i can push Home and go to the start of my blog.
Please help !
ok forgive me,Iam only 11 and I am new to blogging and I followed your instructions and got my menu set up. My question is how do I actually post into one of the dropdown tabs I created?
ReplyDeleteMine is displaying vertically rather than horizontally. How would I fix that?
ReplyDeleteHi, first off your tutorial was awesome, thank you so much! and secondly my drop downs work for my google chrome but when i open it up on internet explorer (after doing everything you said) the drop down menu actually hides behind my posts. could you help me? thank you!!
ReplyDeletewww.kpopkrazyyy.blogspot.com
wow what apiece of information thanky you for posting
ReplyDeleteGood Job
ReplyDeletei did every step as you mentioned here works very well on my blog http://android-tweak.blogspot.in/
but on IE7+ drop down menu hide behind the post what should i do now
Okay, this is probably a a stupid question but how do I add pages/post to my menus?
ReplyDeleteDo I make new 'pages' or new 'posts' and where do I find the links to connect them to my (sub)menus?
http://effulgentsoul.blogspot.com/
i coudnt access my submenus......plizzzz help me sir. in hitesh7heavens.blogspot.com
ReplyDeleteWorked great!! Is there anyway to make it to where it will scroll down with my page, so my viewers dont have to scroll all the way back up. Doing a return to top option doesnt work with the type of blog I have.
ReplyDeleteFriend, Thank you so such!
ReplyDelete2 things,
very easy to follow you,5 min and done. Cant wait to customize it!
And Im with Amber just above me, making it static would be awesome.
Thanks again.
I have a question when in the drop down menu my first one is home when I click it nothing happens. My second one is destinations, and under destinations is Panama city and so on those all work but the home button doesnt what do i do please ?
ReplyDeleteI tried the whole Internet Explorer thing, but it still hides after my date-header in Blogger.. What can I do to fix this? It works perfectly on each browser, except from internet explorer off course -_-
ReplyDeleteThis is my blog: http://peachesandmondays.blogspot.be/
Please send an e-mail to Peachesandmondays@gmail.com
Thanks.
i do it a you said,it shows link1,link2,etc..but no drop menu..this is only for ie ,ihave mozzilla..
ReplyDeletei do it a you said,it shows link1,link2,etc..but no drop menu..this is only for ie ,ihave mozzilla..my mail.pan_me@windowslive.com..please help ..any menu dop doun to work in google blog...
ReplyDeleteHi, thanks so much for this! I had tried several other menus but couldn't get them to work in IE --- yours did!
ReplyDeleteI've applied it across 4 blogs. The 5th one worked fine, and then today, I'm getting the first several links look & work fine in IE, then it breaks {1/2 of drop downs showing up as bulleted lists below header}. Firefox looks totally fine. I'm not sure where to look or why this one of 5 is misbehaving. Any help is appreciated!
Blog: http://graphicsfairy.blogspot.com/
My email: eqmartin@gmail.com
Same layout and isn't having the same IE issue w/ half the menu: http://www.graphicsfairy-crafts.com/
Thank you so much!
wow amazing and very good explaned...well done and thanks a lot!
ReplyDeletehello, very good work!!
ReplyDeletei did every step as you mentioned here works very well on my blog http://karamanosth.blogspot.com
but on IE7+ drop down menu hide behind the post. what should i do now?
thankyou for the tutorial...my problem is that the main menu shows but the drop down menu doesnt show even when i hover over it...please help..shirshakjungthapa@gmail.com,
ReplyDeleteswoyambhuyatayat.blogspot.com
This comment has been removed by the author.
ReplyDeleteThank you so much for sharing how to do this!
ReplyDeleteThe only problem I am having is that I cannot get the code to work so the menue stays down on my blog (http://jaysonjamesbooks.blogspot.com/#)
I added the code to add CSS:
#suckerfishnav li:hover, #suckerfishnav li.hover {
position:static;
}
Thanks for your help!
ThanQ
ReplyDeleteHowever, I don't know what or how it happened, but whenever I input all the code, two of my tabs started redirecting to other sites. Thankfully, I had a backup copy to restore. Do you know what could have happened?
ReplyDeleteThank you.. this is really helpful.. I did it and i'm happy of it now.
ReplyDeletehttp://artistmyx.blogspot.com/
I have another question, if you don't mind. How can I add a 2nd Level Dropdown for the pages? I tried to use the HTML for the sub link but it didn't work.. what do you think should I do?
ReplyDeletereally helpful..
ReplyDeletebut after i added all menu now i want to add more menu and sub menu in bar.. plz help me how can i add more
Hi there, I just added an example of an extended submenu in the html code.
DeleteYou can use that technique to add as many submenus as you want.
nice post, i want add this to my blog soon.
ReplyDeletethx for tutor :)
Can I make the menus and sub menus to take the leight of the longest line instead of aving to adjust the width of the menus. Sub menus don't show up unless I widen the width of the menus also.
ReplyDeleteBut everything else works awesome. Thanks
Oh and yes the css for IE does not work either. It works great with other browsers but not IE.
ReplyDeleteThis comment has been removed by the author.
ReplyDeletethanks sir.
ReplyDeletedigital uisc service
www.al-misbaah.blogspot.com
ReplyDeletehow do i add more than 1 jump break on a page.
and please can the administrator of this blog contact me please i need help with my blog!
Hi, This seemed to work great, however the drop down sub menus are not showing up when I view my site and hover over the page tabs . The sub pages are all listed when I view the html code. Can you help?
ReplyDeleteHey, great post! It worked almost perfectly for me except that the drop down menu only shows some of my subpages and the others don't show. How can I fix that? I already tried adding as many
ReplyDeleteas necessary so that it won't hide behind the post, but it didn't help either.
Thanks I found this to be very help on my blog http://werewolfborn.blogspot.com/ Check it out tell me what you think.
ReplyDeleteHi, your blogpost was really helpful.
ReplyDeleteBut when I try to change the dropdown menu went back of my post..
I've tried position:absolute; index-z:100;
But the result is the same
My link: http://mocchitan.blogspot.com/
If want to add
May I ask where should we add?
Thank you
ReplyDeleteSuperb tutorial,,
ReplyDeletethanks
Thanks, still working on it. your site will not let me copy and paste the codes, is there something i can do?
ReplyDeletethanks
I've done that on purpose to encourage everyone to actually write the code out and make sense of it. If you want to actually copy and paste the code for your own convenience, there are numerous other skeletons similar to mine, but for the purpose of this tutorial I deliberately discouraged that.
DeleteThanks a lot, this really is a truly awsome article! Unfortunately, I found this article too late - I already found the answer on another service. BTW, if anyone needs to merge PDF/PNG files online, I found a service here Alto-Merge.
ReplyDeleteWhether you're aiming for professional success, improved relationships, or overall well-being, the principles outlined here can serve as a roadmap to guide you through the process. keto acv gummies reviews
ReplyDelete