Drop Down Vertical Menu For Blogger

1. Go To Blogger Dashboard >> Design >> Edit HTML
2. Check the "Expand Widget Templates" Box
3. Search (CTRL + F) for this code:

 ]]></b:skin> 


Paste below code Before ]]></b:skin> tag

/* The CSS Code for the menu starts here bloggertrix.com */
#bloggertrix_box_menu{padding:0;margin:0;width:245px;list-style:none outside none}
#bloggertrix_box_menu li{background:#252525;position:relative;border-bottom:1px solid #110f0e;border-top:1px solid #3d3732;}
#bloggertrix_box_menu li ul{position:absolute;padding:0;margin:0;left:245px;top:-1px;display:none;width:160px;list-style:none outside none;z-index:9990;background:#00CC33}
#bloggertrix_box_menu li a{background:url(http://4.bp.blogspot.com/-Z2rx2h9tJd8/UNv6FN_L0II/AAAAAAAAGFQ/ty4e9b5auHQ/s1600/bt-arrow-right-icon.png) no-repeat 5px 10px;display:block;min-height:30px;line-height:30px;margin:0;padding:0 5px 0 25px;text-decoration:none;color:#777;color:#b69786;font-size:14px;border-right:4px solid #35322c;cursor:pointer;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out}
#bloggertrix_box_menu li a:hover{border-right-color:#665d54;text-decoration:none;color:#ddd;background:#38332d url(http://4.bp.blogspot.com/-Z2rx2h9tJd8/UNv6FN_L0II/AAAAAAAAGFQ/ty4e9b5auHQ/s1600/bt-arrow-right-icon.png) no-repeat 5px 10px;}

4. Go to blogger and click Layout

5. Click Add Gadget and select 'HTML/Javascript

6. Paste below code.

<ul id="bloggertrix_box_menu">
    <li><a href="#">Menu List 1</a>
        <ul>
              <li><a href="#">Menu List 1.1</a></li>
              <li><a href="#">Menu List 1.2</a></li>
              <li><a href="#">Menu List 1.3</a></li>
              <li><a href="#">Menu List 1.4</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 2</a>
        <ul>
              <li><a href="#">Menu List 2.1</a></li>
              <li><a href="#">Menu List 2.2</a></li>
              <li><a href="#">Menu List 2.3</a></li>
              <li><a href="#">Menu List 2.4</a></li>
              <li><a href="#">Menu List 2.5</a></li>
              <li><a href="#">Menu List 2.6</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 3</a>
        <ul>
              <li><a href="#">Menu List 3.1</a></li>
              <li><a href="#">Menu List 3.2</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 4</a>
        <ul>
            <li><a href="#">Menu List 4.1</a></li>
              <li><a href="#">Menu List 4.2</a></li>
              <li><a href="#">Menu List 4.3</a></li>
              <li><a href="#">Menu List 4.4</a></li>
              <li><a href="#">Menu List 4.5</a></li>
              <li><a href="#">Menu List 4.6</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 5</a>
          <ul>
            <li><a href="">Menu List 5.1</a></li>
              <li><a href="">Menu List 5.2</a></li>
              <li><a href="">Menu List 5.3</a></li>
              <li><a href="">Menu List 5.4</a></li>
              <li><a href="">Menu List 5.5</a></li>
              <li><a href="">Menu List 5.6</a></li>
              <li><a href="">Menu List 5.7</a></li>
              <li><a href="">Menu List 5.8</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 6</a>
        <ul>
            <li><a href="#">Menu List 6.1</a></li>
              <li><a href="">Menu List 6.2</a></li>
              <li><a href="#">Menu List 6.3</a></li>
              <li><a href="#">Menu List 6.4</a></li>
              <li><a href="#">Menu List 6.5</a></li>
              <li><a href="#">Menu List 6.6</a></li>
              <li><a href="#">Menu List 6.7</a></li>
              <li><a href="#">Menu List 6.8</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 7</a>
        <ul>
            <li><a href="#">Menu List 7.1</a></li>
              <li><a href="#">Menu List 7.2</a></li>
              <li><a href="#">Menu List 7.3</a></li>
              <li><a href="#">Menu List 7.4</a></li>
              <li><a href="#">Menu List 7.5</a></li>
              <li><a href="#">Menu List 7.6</a></li>
              <li><a href="#">Menu List 7.7</a></li>
              <li><a href="#">Menu List 7.8</a></li>
        </ul>
    </li>
    
    <li><a href="#">Menu List 8</a>
             <ul>
            <li><a href="#">Menu List 8.1</a></li>
              <li><a href="#">Menu List 8.2</a></li>
              <li><a href="#">Menu List 8.3</a></li>
              <li><a href="#">Menu List 8.4</a></li>
              <li><a href="#">Menu List 8.5</a></li>
              <li><a href="#">Menu List 8.6</a></li>
        </ul>
    </li>
    
    
</ul>

Replace # with  links.

7. Now save your HTML/Javascript'.
and done... 

Posted in: blogger tips