Yellow Color Style Menu Bar For Blogger

Today im gonna explain, how to add nice yellow menu bar for your blog. Actually this menu bar also included sub menu text.You can make your blog attractive. Im using CSS and HTML for this tutorial i already created lot of menu bar tutorial you can get my all menu bar here

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.

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

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

/* The CSS Code for the menu starts here bloggertrix.com */
#menu6 ul {
    list-style:none;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: -1px;
    line-height: 1.1em;
    float:left;
    clear:both;
    margin:20px;
    border:4px groove #ffe430;
}
#menu6 ul li{
    float:left;
}
#menu6 ul li a{
    display:block;
    text-decoration:none;
    padding:10px 10px 5px 10px;
    color:#fff;
    background-color:#ffc730;
    width:170px;
}
#menu6 ul li a span{
    display:block;
}
#menu6 ul li a span.title{
    border-bottom:2px solid #ffc730;
}
#menu6 ul li a:hover{
    background-color:#fff;
}
#menu6 ul li a:hover span.title{
    color:#ffc730;
    border-bottom:2px solid #ffe430;
}
#menu6 ul li a span.text{
    padding:0px 5px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.4em;
    background-color:#ffc730;
    visibility:hidden;
    color:#fff;
}
#menu6 ul li a:hover span.text{
    visibility:visible;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

 <div id="menu6">
            <ul>
                <li><a href="">
                        <span class="title">About</span>
                        <span class="text">Who we are</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">Download</span>
                        <span class="text">What we have</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">Blog</span>
                        <span class="text">What we talk about</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">Features</span>
                        <span class="text">Special thingd</span>
                    </a>
                </li>
                
                <li><a href="http://www.bloggertrix.com/">
                        <span class="title">Contact</span>
                        <span class="text">How to get in touch</span>
                    </a>
                </li>  
             </ul>
        </div>