Drop down really helps you to link subcategory. right? So here, we’re gonna learn how to add a CSS based black and white mega drop down menu to your blog or website. This menu is created by pure CSS and HTML and never used any image at all. This drop down menu works with both blogger and website perfectly. I hope It’ll change the appearance of your blog and attract visitors cause drive traffic to your blog. Moreover it looks decent and more professional.
Simply have a look at the demo Back & White Drop Down Menu screenshot provided below. Thus it may help you to realize what we’re gonna do right here and right now. If you wanna feel this mega drop down menu in real, slightly go to LS Demo Blog.
CSS Based Black & White Drop Down Menu – Demo Screenshot
How to Add this Drop Down Menu to your Blog?
As my previous posts, let’s divide this task into two parts. Adding CSS part as well as HTML part. So, at first we’ve to apply the skin to this drop down menu in spite of being black and white. Follow the steps given below to make this menu added in your blog.
Step #1: Go to Blogger Dashboard → Template → Edit HTML → Proceed → Check Expand Widget Templates → Press Ctrl+F and search for ]]></b:skin>
Step #2: I suggest you to download the css code snippet, because there’re no any other customizations on it. Because It’s that much perfect. The downloaded CSS cods will be in a .zip format. So extract it all and place the code just before/above ]]></b:skin>
CSS Based Back & White Drop Down Menu – Download CSS Code Snippet
NB: The width of the drop down menu may have to be adjusted based on the width of your blog. Also you can fiddle with the CSS to change the font name, size and much more, only if you know a little bit of programming. But default version is better I think.
Step #3: Save your Template and go to Layout → Click on Add a Gadget and paste the given below code in it.
CSS Based Black & White Drop Down Menu – Customizations
Replace Your Link URL in the li with your linkage, Titles (bold in black color), Headings 1,2,3,4,5 (bold in green color) and sub categories (just after 'Your Link URL') with your own titles, headings & sub catagories.
Along with this, don’t forget to replace http://www.labstrikes.blogspot.com/ with your website/blog's home page URL.
Step #4: Finally drag your Gadget right below your blogger header and click Save arrangement. Now you’re done. If you’re facing any problem while installing ask via comment or contact us by Email.
Also read: Google Style Top Fixed Menu Bar for Blogger