Sim - A Drop Down Navigation Menu Bar

This is the first drop down menu that we are sharing at Blogger Kid. Recently we filed a case study of winning giveaways illegally and we also shared custom popular posts widget with CSS . Now this a menu bar with drop down facilities and also a nice and elegant hover effects. This widget is completely controlled by CSS as well as HTML. It is also easily customizable, if you know a little bit of HTML and CSS as well as a brain! We have named it SIM, as the wish of a regular reader of my blog. We even created this widget due to his compelling. Anyway, Hope you guys will like this widget and dont forget to share if you like . And please do not share this widget at your blog without proper attribution. Else, i will be forced to file a DMCA Takedown . Okay, now lets add SIM - A Dropdown navigation menu bar with cool hover effects. Sim Drop down menu will be a feature product from us which is available for free .

LIVE DEMO

STEPS

1. Go To Blogger
2. Go To Layout - Add A Gadget - HTML/Javascript
3. Now Copy the below code with necessary changes and paste it there 
4. Click Save And Enjoy !

CSS And HTML Codes

<style>#kidmenunav{background:white;padding-left:120px;padding-right:120px;}.menunav {text-align: left;display: inline;margin: 1;padding: 15px 4px 17px 0;list-style: none;font-family: 'Open Sans Condensed', sans-serif;}.kidmenunav li {font: 18px sans-serif;display: inline-block;margin-right: -4px;position: relative;padding: 15px 20px;background: #F2F2F2;cursor: pointer;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;-ms-transition: all 0.2s;-o-transition: all 0.2s;transition: all 0.2s;}.kidmenunav  li:hover {background: #cccccc;color: #fff;}.kidmenunav  li ul {padding: 0;position: absolute;top: 56px;left: 0;width: 160px;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;display: none;opacity: 0;visibility: hidden;-webkit-transition: opacity 0.2s;-moz-transition: opacity 0.2s;-ms-transition: opacity 0.2s;-o-transition: opacity 0.2s;-transition: opacity 0.2s;}.kidmenunav li ul li {background: #cccccc;display: block; z-index:999999999999;color: #fff;}.kidmenunav  li ul li:hover { background: #54c0d1; }.kidmenunav  li ul li a:hover  { color: #fff; }.kidmenunav  li:hover ul {display: block;opacity: 1;visibility: visible;}.kidmenunav a{text-decoration:none;font-size:20px;color: #333333;font-family: 'Open Sans Condensed', sans-serif;line-height: 26px;}</style><div id='kidmenunav'><ul class='kidmenunav'><li><a href='/'>Home</a></li><li><a href='your-link-here'>Blogging</a></li><li><a href='your-link-here'>Widgets</a><ul><li><a href='your-link-here'>Blogger </a></li><li><a href='your-link-here'>Web Development</a></li><li><a href='your-link-here'>Wordpress</a></li></ul></li><li><a href='your-link-here'>Services</a></li><li><a href='your-link-here'>Contact</a></li></ul></div>

Final Words

I Hope you liked this widget . Please share this widget with everyone so that i get enough recognition which i'm not getting . Happy Blogging