Add Awesome Dark Style CSS3 Navigation Menu Bar

How To Add Awesome Dark Style CSS3 Navigation Menu Bar For Blogger

1. Log in to blogger account

2. Now select "Template"

3. Now Click EDIT HTML Button"

4. Find this tag by using Ctrl+F ]]></b:skin>

5. Paste below code Before ]]></b:skin>

/* The CSS3 Code for the menu starts here bloggersstand.blogspot.com */
#bloggersstand_navs {
 background:#2c2c2c;
 margin:0 auto;
 height:50px;
 border-bottom:5px solid #cd2122;
}
 #bloggersstand_navs .menu-alert{
 float:left;
 padding:18px 0 0 10px ;
 font-style:italic;
 color:#FFF;
 }
 #top-menu-mob , #main-menu-mob{ display:none; }
 #bloggersstand_navs ul li {
 text-transform: uppercase;
 font-family: Oswald,arial,Georgia, serif;
 font-size:16px;
 position: relative;
 display: inline-block;
 float: left;
 border:1px solid #222222;
 border-width:0 0 0 1px;
 height:50px;
 }
 #bloggersstand_navs ul li:first-child,
 #bloggersstand_navs ul li:first-child a{border:0 none;}
 #bloggersstand_navs ul li:last-child a{border-right:0 none;}
 #bloggersstand_navs 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;
 }
 #bloggersstand_navs ul li a .sub-indicator{}
 #bloggersstand_navs ul li a:hover {}
 #bloggersstand_navs 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;
 }
 #bloggersstand_navs ul ul li, #bloggersstand_navs 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;
 }
 #bloggersstand_navs ul ul li:first-child ,#bloggersstand_navs ul li.current-menu-item ul li:first-child,
 #bloggersstand_navs ul li.current-menu-parent ul li:first-child,#bloggersstand_navs ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
 #bloggersstand_navs ul ul ul ,#bloggersstand_navs ul li.current-menu-item ul ul, #bloggersstand_navs ul li.current-menu-parent ul ul, #bloggersstand_navs ul li.current-page-ancestor ul ul{right: auto;left: 100%; top: 0 !important; z-index: 99999; }
 #bloggersstand_navs ul.sub-menu a ,
 #bloggersstand_navs ul ul li.current-menu-item a,
 #bloggersstand_navs ul ul li.current-menu-parent a,
 #bloggersstand_navs 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;
 }
 #bloggersstand_navs ul li.current-menu-item ul a,
 #bloggersstand_navs ul li.current-menu-parent ul a,
 #bloggersstand_navs ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
 #bloggersstand_navs ul li:hover > a, #bloggersstand_navs ul :hover > a { color: #FFF ;}
 #bloggersstand_navs ul ul li:hover > a,
 #bloggersstand_navs ul ul :hover > a {color: #FFF !important; padding-left:15px !important;padding-right:5px !important;}
 #bloggersstand_navs ul li:hover > ul {display: block;}
 #bloggersstand_navs ul li.current-menu-item,
 #bloggersstand_navs ul li.current-menu-parent,
 #bloggersstand_navs ul li.current-page-ancestor{
 margin-top:0;
 height:50px;
 border-left:0 none !important;
 }

 #bloggersstand_navs ul li.current-menu-item ul.sub-menu a, #bloggersstand_navs ul li.current-menu-item ul.sub-menu a:hover,
 #bloggersstand_navs ul li.current-menu-parent ul.sub-menu a, #bloggersstand_navs ul li.current-menu-parent ul.sub-menu a:hover
 #bloggersstand_navs ul li.current-page-ancestor ul.sub-menu a, #bloggersstand_navs ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
 #bloggersstand_navs ul li.current-menu-item a, #bloggersstand_navs ul li.current-menu-item a:hover,
 #bloggersstand_navs ul li.current-menu-parent a, #bloggersstand_navs ul li.current-menu-parent a:hover,
 #bloggersstand_navs ul li.current-page-ancestor a, #bloggersstand_navs ul li.current-page-ancestor a:hover{
 background:#cd2122;
 text-shadow:0 1px 1px #b43300;
 color:#FFF;
 height:50px;
 line-height:50px;
 border-left:0 none !important;
 }
 #bloggersstand_navs ul.sub-menu li.current-menu-item,#bloggersstand_navs ul.sub-menu li.current-menu-item a,
 #bloggersstand_navs li.current-menu-item ul.sub-menu a,#bloggersstand_navs ul.sub-menu li.current-menu-parent,
 #bloggersstand_navs ul.sub-menu li.current-menu-parent a,#bloggersstand_navs li.current-menu-parent ul.sub-menu a,
 #bloggersstand_navs ul.sub-menu li.current-page-ancestor,#bloggersstand_navs ul.sub-menu li.current-page-ancestor a,
 #bloggersstand_navs li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
 #bloggersstand_navs ul li.menu-item-home ul li a,
 #bloggersstand_navs ul ul li.menu-item-home a,
 #bloggersstand_navs 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;
 }

6. Go to blogger and click Layout
7. Click Add Gadget and select 'HTML/Javascript
8. Paste below code.

<nav id='bloggersstand_navs'>
<div class='container'>
<div class='main-menu'><ul class='menu' id='menu-main'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Modes</a>
<ul class='sub-menu'>
 <li><a href='#'>Post With Featured Image</a></li>
 <li><a href='#'>Post With Slider</a></li>
 <li><a href='#'>Post with SoundCloud</a></li>
 <li><a href='#'>Post With Video</a></li>
</ul>
</li>
 <li><a href='#'>Downloads</a>
<ul class='sub-menu'>
 <li><a href='#'>Text and Lists</a></li>
 <li><a href='#'>Video and Audio</a></li>
 <li><a href='#'>Social</a></li>
 <li><a href='#'>Tabs &amp; Toggles &amp; Author</a></li>
</ul>
</li>
 <li><a href='#'>Templates</a>
<ul class='sub-menu'>
 <li><a href='#'>Authors</a></li>
 <li><a href='#'>Sitemap</a></li>
 <li><a href='#'>Tags</a></li>
 <li><a href='#'>Timeline</a></li>
</ul>
</li>
 <li><a href='#'>Categories</a>
<ul class='sub-menu'>
 <li><a href='#'>World</a></li>
 <li><a href='#'>Technology</a></li>
 <li><a href='#'>Sports</a></li>
</ul>
</li>
 <li><a href='#'>Layout</a>
<ul class='sub-menu'>
 <li><a href='#'>Full Width</a></li>
 <li><a href='#'>Right Sidebar</a></li>
 <li><a href='#'>Left SIdebar</a></li>
</ul>
</li>
<li><a href='#'>Reviews</a>
<ul class='sub-menu'>
 <li><a href='#'>Stars</a></li>
 <li><a href='#'>Points</a></li>
 <li><a href='#'>Percent</a></li>
 <li><a href='#'>in The Top</a></li>
</ul>
</li>
</ul></div>
</div>
</nav> 

*Change All # With Your Links.

9. Now save your HTML/Javascript'. Done!

If you have any query regarding Attractive Dark Style CSS3 Navigation Menu Bar for blogger/blogspot.it give amazing look to your website or blog.Feel free to ask,just drop your comment below. 

Add Awesome Dark Style CSS3 Navigation Menu Bar for blogger blogspot,how to add css3 html navigaion menu bar to blogger website,attractive menu widget

shekhar singh

How To Add Awesome Dark Style CSS3 Navigation Menu Bar For Blogger 1. Log in to blogger account 2. Now select "Template"...

SUMMARY

Add Awesome Dark Style CSS3 Navigation Menu Bar for blogger blogspot,how to add css3 html navigaion menu bar to blogger website,attractive menu widget

KEEP ON READING...

We hope this article helped you to learn Add Awesome Dark Style CSS3 Navigation Menu Bar. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+