How To Add Drop Down Navigation Menu In Blogger

In my previous article you have learned about optimize images in search engine. Today's post is about how to add stylish CSS3 Drop down menu in blogger. However when you have too much content on your blog and you are in difficulties that how to organize it than drop down menu is most important to organize your blog category or menu because one of the main reason, you can add multiple link together and if you use in your blog site it makes your blog beautiful and more attractive for viewer eyes and your  visitors will not spend too much time to find out some specific category on your blog. You just  need to add a piece of code on your website or blog. Don't worry CSS3 coding and HTML coding doesn't effect blog loading time.

Adding Stylish CSS3 Drop Down Menu In Blogger

This short tutorial is all about CSS3 drop menu you just need to copy the below code and paste it on
your blog. Follow the simple step carefully so lets start it.

1. First Backup your blogger Template.
2. Go to Blogger > Dashboard
3. Click on Template > Edit HTML
4. Use Ctrl+F to find ]]></b:skin> Copy and paste the below code above it.

/*----- Drop Down Menu BY www.earnbloggercafe.blogspot.com----*/

#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;
}

Once you paste the above code than save your template. Now follow the below step.

Go to Blogger > Layout
Add a Gadget > Edit HTML/JavaScript
Copy and paste the below code into HTML/JavaScript

<div id='rbnavbar'>
      <ul id='rbnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>Blogger Tips</a>
       </li>
        <li>
          <a href='#'>SEO</a>
       </li>
        <li>
          <a href='#'>About Us</a>
        </li>
  <li>
           <a href='#'>Menu</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='#'>Contact Us</a>
        </li>
      </ul>
    </div>

Customization

• Replace the # with your URL address.
• Replace the menu name with your own menu name.

Need Help

If you are facing any difficulties, you may ask me at any time in below comment section. Your comments would be highly appreciated!