Create a Simple Drop Down Menu In Blogger Blog

Adding drop down menu to your blog is the best way to arrange your blog/site important links, it will helps your readers to easily navigate through your blog which will definitely increase your site page views and impression.
This drop down menu comprises of CSS and html and it doesn't affect your blog load time. In my previous post, i have discuss on some cool drop down menu like how to add CSS3 drop down menu, create awesome CSS3 drop down menu and there is still lot's more on the way.

How To Add The Drop Down Menu

STEP 1

• Go to your blogger dashboard
• Click on "Design" > "Edit HTML" back up your template
• Use ctrl F to find ]]></b:skin> and paste the following code above/before it

/*----- Drop Down Menu BY www.realcombiz.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;
}

• To change the color of your background menu, simply edit #2a2626
• To change the background color of the menu on mouse hover, then edit #6c6464
• To change the background color of the drop down menu, edit #6c6464
• Click "SAVE TEMPLATE" when you are done with your editing

STEP 2

Now we are need to add the html code

• Go to "Page Elements", click "Add a Gadget" below your header
• Choose "HTML/JavaScript" from the list of the options and paste the following code in the content box leaving the title blank

<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>

• Replace all occurrence of # with the link/url of each page you want to point the menu to
• Replace all text highlighted in green      with the title of each menu
• Click "Save" and if you need any further help, please feel free to ask using the comment box, and we will get back to you asap.

Note: If you observed that your submenu (Sub Page) is hidden, kindly read this:

•  How to add drop down menu in new blogger template

 
Hope you enjoy this articles? take few seconds to share it and subscribe for our latest posts update.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz