Add Drop Down Menu in Blogger

This tutorial is a simple CSS styled drop-down menu for Blogger. For add this menu go to blogger account, then go to Layout > Add a new HTML/Javascript Gadget and add the following code to it

 Under Content, paste the following code

<div id="menubar">
     <ul id="menus">
      <li>
        <a href="URL LINK TO PAGE">NAME PAGE</a>
    </li>
    <li>
       <a href="URL LINK TO PAGE">NAME PAGE</a>
      <ul>
    <li><a href="url link to label/sub-category1">subcategory1</a></li>
      </ul>
      </li>
      <li>
        <a href="URL LINK TO PAGE">NAME PAGE</a>
      <ul>
    <li><a href="url link to label/sub-category1">subcategory1</a></li>
    <li><a href="url link to label/sub-category2">subcategory2</a></li>
      </ul>
      </li>
      <li>
        <a href="URL LINK TO PAGE">NAME PAGE</a>
        <ul>
    <li><a href="url link to label/sub-category1">subcategory1</a></li>
    <li><a href="url link to label/sub-category2">subcategory2</a></li>
    <li><a href="url link to label/sub-category3">subcategory3</a></li>
        </ul>
      </li>
    </ul>
  </div>

Add another dropdown category

   <li>
        <a href="URL LINK TO PAGE">NAME PAGE</a>
        <ul>
    <li><a href="url link to label/sub-category1">subcategory1</a></li>
    <li><a href="url link to label/sub-category2">subcategory2</a></li>
    <li><a href="url link to label/sub-category3">subcategory3</a></li>
        </ul>

Add another Sub-Category

<li><a href="url link to label/sub-category4">subcategory4</a></li>

Now Add the CSS code to Template
 Click on Template -  Click Edit HTML - Search for the following line: ]]></b:skin> (Press CTRL+F and type or Copy and paste in Search ]]></b:skin>)
 Paste the following code directly above that line (]]></b:skin>)

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

You can Costumize some values if you want

 Like Colors of background

 Click Save Template, then Close

If dropdown menu not visible

Go to Template > Click Edit HTML - Search for the following line.tabs-outer, change overflow: hidden; to overflow: visible; and Save.