How To Add Black Colour CSS Drop Down 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>
/*CSS menu starts here bloggersstand.blogspot.com */6. Go to blogger and click Layout
.containerbt {margin: 0 auto;width: 610px;text-align: center;height:300px;}
ul.dark_menu {
list-style: none;padding: 0; font-family: Arial;font-size: 14px;line-height: 14px;}
ul.dark_menu:after {content: "";clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
ul.dark_menu li {float: left;margin: 0 0 0 10px;position: relative;}
ul.dark_menu li:first-child {margin: 0;}
ul.dark_menu li a, ul.dark_menu li a:link {color: #FFFFFF;text-decoration: none;
display: block;padding: 10px 26px;text-shadow: 0 1px 0 #4b433e; background: #362f2c;
background: -moz-linear-gradient(top, #362f2c 0%, #282321 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#362f2c), color-stop(100%,#282321));background: -webkit-linear-gradient(top, #362f2c 0%,#282321 100%);
background: -o-linear-gradient(top, #362f2c 0%,#282321 100%);
background: -ms-linear-gradient(top, #362f2c 0%,#282321 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362f2c', endColorstr='#282321',GradientType=0 );
background: linear-gradient(top, #362f2c 0%,#282321 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514;
-moz-box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514;
box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
ul.dark_menu li a:hover {
color: #73635e;
text-shadow: 0 1px 1px #000;
background: #282321;
background: -moz-linear-gradient(top, #282321 0%, #362f2c 99%, #362f2c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282321), color-stop(99%,#362f2c), color-stop(100%,#362f2c));
background: -webkit-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%);
background: -o-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%);
background: -ms-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282321', endColorstr='#362f2c',GradientType=0 );
background: linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}
ul.dark_menu li a.selected, ul.dark_menu li a:active {
color: #73635e;background: #282321;
text-shadow: 0 1px 1px #000;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;
-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}
ul.dark_menu li ul {display: none;}
ul.dark_menu li ul:before {content: " ";position: absolute;display: block;z-index: 1500;left: 0;top: -10px;height: 10px;width: 100%;}
ul.dark_menu li:hover ul {
position: absolute;display: block;z-index: 1000;left: 0;top: 44px;padding: 5px 0;list-style: none;background: #282321;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;
-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
ul.dark_menu li ul li {
float: none;margin: 0 10px;border-bottom: 1px solid #191614;border-top: 1px solid #3a3230;}
ul.dark_menu li ul li:first-child {
margin: 0 10px;
border-top: 0 none;}
ul.dark_menu li ul li:last-child {
border-bottom: 0 none;}
ul.dark_menu li ul li a, ul.dark_menu li ul li a:link {
color: #73635e;display: block;background: transparent none;padding: 10px 20px 10px 5px;white-space: nowrap;text-shadow: 0 1px 2px #000;-webkit-box-shadow: 0 0 0 rgba(0,0,0,0);-moz-box-shadow: 0 0 0 rgba(0,0,0,0);box-shadow: 0 0 0 rgba(0,0,0,0);
-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;}
ul.dark_menu li ul li a:hover {text-decoration: underline;background: #2a2523;}
7. Click Add Gadget and select HTML/Javascript
8. Paste below code
<div class="container">*Change All # With Your Links.
<!-- Dark Menu Begin -->
<ul class="dark_menu">
<li><a href="#" class="selected">Home</a></li>
<li>
<a href="#">Download</a>
<!-- Sub Menu Begin -->
<ul>
<li><a href="#">Menu Link 1</a></li>
<li><a href="#">Menu Link 2</a></li>
<li><a href="#">Menu Link 3</a></li>
<li><a href="#">Menu Link 4</a></li>
</ul>
<!-- Sub Menu End -->
</li>
<li>
<a href="#">Blog</a>
<!-- Sub Menu Begin -->
<ul>
<li><a href="#">Menu Link 1</a></li>
<li><a href="#">Menu Link 2</a></li>
<li><a href="#">Menu Link 3</a></li>
<li><a href="#">Menu Link 4</a></li>
</ul>
<!-- Sub Menu End -->
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- Dark Menu End -->
</div>
9. Now save your HTML/Javascript',Done!
If you have any query regarding Stylish Dark CSS Drop Down Navigation Menu Bar for blogger Feel free to ask,just drop your comment below.