How to Create a Drop Down Menu in Blogger

Here are the 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                                                                                                                                                             

                         13.  Search for the following line  (shortcut Ctrl+f) ]]></b:skin>  

 15.Paste the following code directly above that line                                                                                                                                          

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

#menubar {
    background: #8E8E8E;
    width: 840px;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:1px solid #B2FFFF;
        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 #1A6680;
        border-right:1px solid #1A6680;
        height:35px;
}
#menus li a, #menus li a:link, #menus li a:visited {
    color: #FFF;
    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: #130000; /* Menu hover */
    color: #FFF;
    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: #B3B3B3; /* drop down background color */
    width: 120px;
    color: #FFF;
    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: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

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

  16.  Click Save Template, then Close

Share on Facebook Share on Twitter Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.