Black Colour Style CSS Drop Down Navigation Menu Bar

0
Add Black Colour CSS Drop Down Navigation Menu Bar For Blogger

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 */
.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;}
6. Go to blogger and click Layout
7. Click Add Gadget and select HTML/Javascript
8. Paste below code
<div class="container">
        <!-- 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>
*Change All # With Your Links.

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. 
how to add dark Black Colour Style CSS Drop Down Navigation Menu Bar into for blogger blogspot website header menu,css hover effect html navigation drop down bar black and grey color
How To Add Black Colour CSS Drop Down Navigation Menu Bar For Blogger 1. Log in to blogger acc...
SUMMARY

how to add dark Black Colour Style CSS Drop Down Navigation Menu Bar into for blogger blogspot website header menu,css hover effect html navigation drop down bar black and grey color

You Might Also Like:

We hope this article helped you to learn Black Colour Style CSS Drop Down 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+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Black Colour Style CSS Drop Down Navigation Menu Bar" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand