simple dropdown menu for blogger blog

Simple dropdown menu for blogger

hello everyone today i,m going to teach you that how to add simple dropdown menu in blogger and telling you about advantages of dropdown menu . you see these dropdown menu's in many of blogging blogs because one of the main point to use it is that you can add multiple links in one place and it makes your blog beautiful so you can understand importance of dropdown menu's in blogs .
lets start telling about adding this menu in blogger this is very simple to add dropdown menu in blogger
these are steps you have to follow them .

Steps

go to blogger dashboard > html> edit html > proceed
now find ]]></b:skin>
now paste following code above ]]></b:skin> tag

/*----- RB Drop Down Menu ----*/

#rbnavbar {
    background: #2a2626;
    width: 100%;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #7f7777;
        height:35px;
}

#rbnav {
    margin: 0;
    padding: 0;
}
#rbnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#rbnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#rbnav li a, #rbnav li a:link, #rbnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;

}
#rbnav li a:hover, #rbnav li a:active {
    background: #6c6464;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;



}
#rbnav li {
    float: left;
    padding: 0;
}
#rbnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#rbnav li ul a {
    width: 140px;
}
#rbnav li ul ul {
    margin: -25px 0 0 161px;
}
#rbnav li:hover ul ul, #rbnav li:hover ul ul ul, #rbnav li.sfhover ul ul, #rbnav li.sfhover ul ul ul {
    left: -999em;
}
#rbnav li:hover ul, #rbnav li li:hover ul, #rbnav li li li:hover ul, #rbnav li.sfhover ul, #rbnav li li.sfhover ul, #rbnav li li li.sfhover ul {
    left: auto;
}
#rbnav li:hover, #rbnav li.sfhover {
    position: static;
}
#rbnav li li a, #rbnav li li a:link, #rbnav li li a:visited {
    background: #6c6464;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;

}
#rbnav li li a:hover, #rbnavli li a:active {
    background: #2a2626;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

Now save the template
goto layout and add a gadget
select html/javascript
and paste following code in it

<div id='rbnavbar'>
      <ul id='rbnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>Contact</a>
       </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Blogging</a>
        </li>
<li>
           <a href='#'>Services</a>
            <ul>
                <li><a href='#'>Sub Page #1</a></li>
                <li><a href='#'>Sub Page #2</a></li>
                <li><a href='#'>Sub Page #3</a></li>
                <li><a href='#'>Sub Page #4</a></li>
                <li><a href='#'>Sub Page #5</a></li>
              </ul>
        </li>
         <li>
          <a href='#'>Create This ></a>
        </li>
      </ul>
    </div>
if you want to change menu colour change this #2a2626
if you want to change colour of menu backgroun on mouse hover change this #6c6464
if you want to change dropdown colour change this #6c6464
replace # with your menu link and names with your titles