Dropdown Menu Navigation bar For Blogger | 2014 | InfoTechBlogging InfoTechBlogging: Dropdown Menu Navigation bar For Blogger | 2014

Posted by Syed Muhammad Ali
This is another Awesome Horizontal Bar by Itb. We are sharing with you an awesome Horizontal Drop Down menu which which make your Blog Attractive and will help your visitor to Find Latest posts on your Blog.
We have used a little Css to Create this Dropdown Menu.

All the rights are strictly reserved by Itb and should not be copied.

Featured Posts:

Horizontal Dropdown Menu For Blogger

Blogger Navigation Menu With Date
Navigation Menu with Social Sharing Buttons 

  • Colorful Drop Down Menu with Different Colors on Hovering 
  • Easy to Install
  • Attached to Screen, Scrollable
  • Transparency effect while scrolling

Follow the Below Steps to Add this Awesome Menu in Blogger

  • Go to Blogger
  • Log-In to your Dashboard
  • Go to Template Section
  • Find ]]>
  • Paste the Below code Just above ]]> 

#main-nav {width: 1000px;background: #2c2c2c;margin: 0 auto;height: 50px;margin-bottom: -20px;margin-left: -10px;border-bottom: 5px solid #8542AC;}#main-nav .menu-alert{float:left;padding:18px 0 0 10px ;font-style:italic;color:#FFF;}#top-menu-mob , #main-menu-mob, .sidelay{ display:none; }#main-nav ul li {z-index:20;text-transform: uppercase;font-family: Oswald,arial,Georgia, serif;font-size:16px;position: relative;display: inline-block;float: left;border:1px solid;border-width:0 0 0 1px;height:50px;}#main-nav ul li:first-child,#main-nav ul li:first-child a{border:0 none;}#main-nav ul li:last-child a{border-right:0 none;}#main-nav ul li a {display: inline-block;height: 50px;line-height: 50px;color: #ddd;padding:0 14px;text-shadow:0 1px 1px #000;border-left:1px solid #383838;}#main-nav ul li a .sub-indicator{}#main-nav ul li a:hover {}#main-nav ul ul{display: none;padding:0;position: absolute;top: 50px;width: 180px;z-index: 99999;float: left;background: #2d2d2d !important;-webkit-box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);box-shadow: 0 3px 4px 1px rgba(0, 0, 0, 0.2);-webkit-border-bottom-right-radius: 3px;-webkit-border-bottom-left-radius: 3px;-moz-border-radius-bottomright: 3px;-moz-border-radius-bottomleft: 3px;border-bottom-right-radius: 3px;border-bottom-left-radius: 3px;}#main-nav ul ul li, #main-nav ul ul li:first-child {background: none !important;z-index: 99999;min-width: 180px;border:0 none;border-bottom: 1px solid #222;border-top: 1px solid #383838;font-size:13px;height:auto;margin:0;}#main-nav ul ul li:first-child ,#main-nav ul li.current-menu-item ul li:first-child,#main-nav ul li.current-menu-parent ul li:first-child,#main-nav ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}#main-nav ul ul ul ,#main-nav ul li.current-menu-item ul ul, #main-nav ul li.current-menu-parent ul ul, #main-nav ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 99999; }#main-nav ul.sub-menu a ,#main-nav ul ul li.current-menu-item a,#main-nav ul ul li.current-menu-parent a,#main-nav ul ul li.current-page-ancestor a{border:0 none;background: none !important;height: auto !important;line-height: 1em;padding: 10px 10px;width: 160px;display: block !important;margin-right: 0 !important;z-index: 99999;color: #ccc !important;text-shadow:0 1px 1px #000 !important;}#main-nav ul li.current-menu-item ul a,#main-nav ul li.current-menu-parent ul a,#main-nav ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}#main-nav ul li:hover > a, #main-nav ul :hover > a { color: #FFF ;}#main-nav ul ul li:hover > a,#main-nav ul ul :hover > a {color: #FFF !important; padding-left:15px !important;padding-right:5px !important;}#main-nav ul li:hover > ul {display: block;}#main-nav ul li.current-menu-item,#main-nav ul li.current-menu-parent,#main-nav ul li.current-page-ancestor{margin-top:0;height:50px;border-left:0 none !important;}#main-nav ul li.current-menu-item ul.sub-menu a, #main-nav ul li.current-menu-item ul.sub-menu a:hover,#main-nav ul li.current-menu-parent ul.sub-menu a, #main-nav ul li.current-menu-parent ul.sub-menu a:hover#main-nav ul li.current-page-ancestor ul.sub-menu a, #main-nav ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}#main-nav ul li.current-menu-item a, #main-nav ul li.current-menu-item a:hover,#main-nav ul li.current-menu-parent a, #main-nav ul li.current-menu-parent a:hover,#main-nav ul li.current-page-ancestor a, #main-nav ul li.current-page-ancestor a:hover{background:#8542AC;text-shadow:0 1px 1px #b43300;color:#FFF;height:50px;line-height:50px;border-left:0 none !important;}#main-nav ul.sub-menu li.current-menu-item,#main-nav ul.sub-menu li.current-menu-item a,#main-nav li.current-menu-item ul.sub-menu a,#main-nav ul.sub-menu li.current-menu-parent,#main-nav ul.sub-menu li.current-menu-parent a,#main-nav li.current-menu-parent ul.sub-menu a,#main-nav ul.sub-menu li.current-page-ancestor,#main-nav ul.sub-menu li.current-page-ancestor a,#main-nav li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}#main-nav ul li.menu-item-home ul li a,#main-nav ul ul li.menu-item-home a,#main-nav ul li.menu-item-home ul li a:hover{background-color:transparent !important;text-indent:0;background-image:none !important;height:auto !important;width:auto;}.main-menu .menu li.green a:hover { background-color: #8542AC !important;}.main-menu .menu li.green:hover > a { background-color: #8542AC !important;}.main-menu .menu li.yellow a:hover { background-color: #F39C12 !important;}.main-menu .menu li.yellow:hover > a { background-color: #F39C12 !important;}.main-menu .menu li.red a:hover { background-color: #E8373E !important;}.main-menu .menu li.red:hover > a { background-color: #E8373E !important;}.main-menu .menu li.orange a:hover { background-color: #FE6600 !important;}.main-menu .menu li.ornage:hover > a { background-color: #FE6600 !important;}.main-menu .menu li.green-2 a:hover { background-color: #8542AC !important;}.main-menu .menu li.green-2:hover > a { background-color: #8542AC !important;}.main-menu .menu li.blue a:hover { background-color: #2950A3 !important;}.main-menu .menu li.blue:hover > a { background-color: #2950A3 !important;}.main-menu .menu li.green-3 a:hover { background-color: #1abc9c !important;}.main-menu .menu li.green-3:hover > a { background-color: #8542AC !important;}.main-menu .menu li.pink a:hover { background-color: #D90162 !important;}.main-menu .menu li.pink:hover > a { background-color: #D90162 !important;}#menu-main a.home{ background-color: #8542AC !important;margin-left: -40px;text-indent:-9999px;padding:0;width:60px;background-image:url(http://3.bp.blogspot.com/-gLyWqvxTm1I/UkxNBw50IQI/AAAAAAAADO8/Qn-VSHK9N1g/s1600/bhome.png);background-position:center;background-repeat:no-repeat}#menu-main {margin-top: -13px;width: 900px;margin: 0 auto;}a:link {text-decoration:none;}a:visited {text-decoration:none;}a:hover {text-decoration:none;}.sub-menu a:hover{background: none !important;}

.sub-menu a{height:auto !important; line-height: 12px;}

  • Now Search for tag
  • Paste the Below Code Just Above tag.

       $(document).ready(function(){  $(“.rthumbbox3:first”).addClass(“firstka3”);  $(“.rthumbbox2:first”).addClass(“firstka2”);  $(“.rthumbbox:first”).addClass(“firstka”); $(“#menu-main”).tinyNav({  active: ‘selected’, // String: Set the “active” class  header: ‘Navigation’, // String: Specify text for “header” and show header instead of the active item  label: ”});var _0x210e=[“”,”\x73\x72\x63″,”\x61\x74\x74\x72″,”\x73\x37\x32\x2D\x63″,”\x73\x32\x35\x30\x2D\x61″,”\x72\x65\x70\x6C\x61\x63\x65″,”\x65\x61\x63\x68″,”\x23\x72\x65\x6C\x61\x74\x65\x64\x2D\x70\x6F\x73\x74\x73\x20\x69\x6D\x67″];$(_0x210e[7])[_0x210e[6]](function (){var _0xc631x1=_0x210e[0];_0xc631x1=$(this)[_0x210e[2]](_0x210e[1]);_0xc631x1=_0xc631x1[_0x210e[5]](_0x210e[3],_0x210e[4]);$(this)[_0x210e[2]](_0x210e[1],_0xc631x1);} );var _0x727e=[“\x76\x61\x6C”,”\x23\x69\x6D\x70\x6F\x72\x74\x61\x6E\x74\x6C\x69\x6E\x6B\x73\x32″,”\x68\x72\x65\x66″,”\x6C\x6F\x63\x61\x74\x69\x6F\x6E”,”\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x6D\x79\x62\x6C\x6F\x67\x67\x65\x72\x74\x68\x65\x6D\x65\x73\x2E\x63\x6F\x6D\x2F”,”\x61\x74\x74\x72″];var aa=$(_0x727e[1])[_0x727e[0]]();if(aa==null){window[_0x727e[3]][_0x727e[2]]=_0x727e[4];} ;$(_0x727e[1])[_0x727e[5]](_0x727e[2],_0x727e[4]);});

   

  • Now Search for or
  • Paste the Below Code Just Below the Above Code,