How to add drop down menu in blogger

How To add drop down menu in blogger

Follow the following steps to create a drop down menu in Blogger:

  1.  In the Blogger dashboard, go to Layout

  2.  Click on Add a Gadget

  3.  Select HTML/JavaScript

  4.  Under Content, paste the following code

  <div id='menubar'>

    <ul id='menus'>

      <li>

        <a href='#'>MenuItem</a>

      </li>

      <li>

        <a href='#'>MenuItem</a>

      </li>

      <li>

        <a href='#'>MenuItem</a>

      </li>

      <li>

        <a href='#'>MenuItem</a>

        <ul>

          <li><a href='#'>SubMenuItem</a></li>

          <li><a href='#'>SubMenuItem</a></li>

          <li><a href='#'>SubMenuItem</a></li>

        </ul>

      </li>

    </ul>

  </div>

  5.  Replace MenuItem with the appropriate menu label

  6.  Replace SubMenuItem with the appropriate sub-menu label

  7.  Replace # with the appropriate URL

  8.  Click Save

  9.  Move the HTML/Javascript object to where you want the menu to appear

  10.  Click Save arrangement

  11.  Click on Template

  12.  Click Edit HTML

  14.  Search for the following line:

          ]]></b:skin>

  15.  Paste the following code directly above that line

/*-------- Begin Drop Down Menu -------*/

#menubar {
    background: #FF0000;
    width: 1000px;
    color: #A4F2E9;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:1px solid #FF8A33;
        height:35px;
}

#menus {
    margin: 0;
    padding: 0;
}

#menus ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menus li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #FF7733;
        border-right:1px solid #FF7733;
        height:35px;
}
#menus li a, #menus li a:link, #menus li a:visited {
    color: #25BD04;
    display: block;
   font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

#menus li a:hover, #menus li a:active {
    background: #FFFD99; /* Menu hover */
    color: #BED50D;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;       
}

#menus li {
    float: left;
    padding: 0;
}

#menus li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}

#menus li ul a {
    width: 140px;
}

#menus li ul ul {
    margin: -25px 0 0 160px;
}

#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
    left: -999em;
}

#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li li.sfhover ul, #menus li li li.sfhover ul {
    left: auto;
}

#menus li:hover, #menus li.sfhover {
    position: static;
}

#menus li li a, #menus li li a:link, #menus li li a:visited {
    background: #28E8DC; /* drop down background color */
    width: 120px;
    color: #F4240A;
    display: block;
    font:normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px solid #1A6680;
}

#menus li li a:hover, #menusli li a:active {
    background: #130000; /* Drop down hover */
    color: #B2F7CC;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

/*-------- End Drop Down Menu -------*/

I hope this will help you become a greater publisher!!!