CSS Based Black & White Drop Down Menu for Blogger


Best Commentator: Apple iPhone 7 Plus (256 GB) WINNER: Michalina Logan
To claim your prize, please send us an email.


css drop down menu
Drop down really helps you to link subcategory. right? So here, were 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 Itll 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 were 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 

css horizontal drop down menu

How to Add this Drop Down Menu to your Blog?

As my previous posts, lets divide this task into two parts. Adding CSS part as well as HTML part. So, at first weve 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 therere no any other customizations on it. Because Its 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.
 

<ul class="dropdown dropdown-horizontal" id="nav">
<li><a href="Your Link URL">Home</a></li>
<li><a class="dir" href="Your Link URL">Solutions</a>
<ul>
<li class="empty">Industries</li>
<li><a href="Your Link URL">Broadcast and media</a></li>
<li><a href="Your Link URL">Education</a></li>
<li><a href="Your Link URL">Financial services</a></li>
<li><a href="Your Link URL">Government</a></li>
<li class="empty">Solutions</li>
<li><a href="Your Link URL">Consumer photo</a></li>
<li><a href="Your Link URL">Mobile</a></li>
<li><a href="Your Link URL">Print publishing</a></li>
<li><a href="Your Link URL">Pro photography</a></li>
<li><a href="Your Link URL">Professional video</a></li>
<li><a href="Your Link URL">Applications</a></li>
</ul></li>
<li><a class="dir" href="http://www.labstrikes.blogspot.com/">Products</a>
<ul>
<li><a href="Your Link URL">Acrobat Connect Pro</a></li>
<li><a href="Your Link URL">Acrobat family</a></li>
<li><a href="Your Link URL">Adobe AIR</a></li>
<li><a href="Your Link URL">After Effects</a></li>
<li><a href="Your Link URL">ColdFusion</a></li>
<li><a href="Your Link URL">Creative Suite family</a></li>
<li><a href="Your Link URL">Dreamweaver</a></li>
</ul></li>
<li><a class="dir" href="http://www.labstrikes.blogspot.com/">Support</a>
<ul>
<li><a href="Your Link URL">Support home</a></li>
<li><a href="Your Link URL">Customer Service</a></li>
<li><a href="Your Link URL">Knowledgebase</a></li>
<li><a href="Your Link URL">Books</a></li>
<li><a href="Your Link URL">Training</a></li>
<li><a href="Your Link URL">Support programs</a></li>
</ul></li>
<li><a class="dir" href="http://www.labstrikes.blogspot.com/">Communities</a>
<ul>
<li class="empty">By user</li>
<li><a href="Your Link URL">Designers</a></li>
<li><a href="Your Link URL">Developers</a></li>
<li><a href="Your Link URL">Educators</a></li>
<li><a href="Your Link URL">Partners</a></li>
<li class="empty">By resource</li>
<li><a href="Your Link URL">Adobe Labs</a></li>
<li><a href="Your Link URL">Adobe TV</a></li>
<li><a href="Your Link URL">Forums</a></li>
</ul></li>
<li><a class="dir" href="http://www.labstrikes.blogspot.com/">Company</a>
<ul>
<li><a href="Your Link URL">About Adobe</a></li>
<li><a href="Your Link URL">Press</a></li>
<li><a href="Your Link URL">Investor Relations</a></li>
<li><a href="Your Link URL">Corporate Affairs</a></li>
<li><a href="Your Link URL">Careers</a></li>
<li><a href="Your Link URL">Showcase</a></li>
<li><a href="Your Link URL">More ›</a></li>
</ul></li>
<li><a class="dir" href="http://www.labstrikes.blogspot.com/">Downloads</a>
<ul>
<li><a href="Your Link URL">Downloads home</a></li>
<li><a href="Your Link URL">Trial downloads</a></li>
<li><a href="Your Link URL">Updates</a></li>
<li><a href="Your Link URL">Exchange</a></li>
<li class="empty">Readers and Players</li>
<li><a href="Your Link URL">Get Adobe Reader</a></li>
<li><a href="Your Link URL">Get Flash Player</a></li>
</ul></li>
<li><a class="dir" href="http://www.labstrikes.blogspot.com/">Store</a>
<ul>
<li><a href="Your Link URL">Store home</a></li>
<li><a href="Your Link URL">Software</a></li>
<li><a href="Your Link URL">Fonts</a></li>
<li><a href="Your Link URL">Books</a></li>
<li><a href="Your Link URL">Support programs</a></li>
</ul></li>
</ul>


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, dont 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 youre done. If youre facing any problem while installing ask via comment or contact us by Email.

Also read: Google Style Top Fixed Menu Bar for Blogger