Drop down list

Drop down list

 Make Mulitipal drop down menu very easy and make beautiful your blog and websites with this

 tips and tricks. Multipal choice in drop menu. 

• Go to blogger dashboard > Layout

• Click on add a gadget (below Header Past)

• Select HtML/ Javascript

• Paste Below code inside it, 

  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

   <script src='http://code.helperblogger.com/dd-level-menu.js'
  type='text/javascript'></script>
  <style>
  /* ######### Drop Down Menu Bu HelperBlogger.com ######### */   
  /* ######### Matt Black Strip Main Menu Bar CSS ######### */
  .ddsubmenustyle, .ddsubmenustyle div {
          /*topmost and sub DIVs, respectively*/
      font: normal 13px Verdana;
      margin: 0;
      padding: 0;
      position: absolute;
      left: 0;
      top: 0;
      list-style-type: none;
      background: white;
      border: 1px solid black;
      border-bottom-width: 0;
      visibility: hidden;
      z-index: 100;
  }
  
  .ddsubmenustyle ul {
      margin: 0;
      padding: 0;
      position: absolute;
      left: 0;
      top: 0;
      list-style-type: none;
      border: 0px none;
  }
  
  .ddsubmenustyle li a {
      display: block;
      width: 170px;
          /*width of menu (not including side paddings)*/
      color: black;
      background-color: lightyellow;
      text-decoration: none;
      padding: 4px 5px;
      border-bottom: 1px solid black;
  }
  
  * html .ddsubmenustyle li {
          /*IE6 CSS hack*/
      display: inline-block;
      width: 170px;
          /*width of menu (include side paddings of LI A*/
  }
  
  .ddsubmenustyle li a:hover {
      background-color: black;
      color: white;
  }
  
  .downarrowpointer {
          /*CSS for "down" arrow image added to top menu items*/
      padding-left: 4px;
      border: 0;
  }
  
  .rightarrowpointer {
          /*CSS for "right" arrow image added to drop down menu items*/
      position: absolute;
      padding-top: 3px;
      left: 100px;
      border: 0;
  }
  
  .ddiframeshim {
      position: absolute;
      z-index: 500;
      background: transparent;
      border-width: 0;
      width: 0;
      height: 0;
      display: block;
  }
      /* ######### Black Strip Main Menu Bar CSS ######### */
  .mattblackmenu ul {
      margin: 0;
      padding: 0;
      font: bold 12px Verdana;
      list-style-type: none;
      border-bottom: 1px solid gray;
      background: #414141;
      overflow: hidden;
      width: 100%;
  }
  
  .mattblackmenu li {
      display: inline;
      margin: 0;
  }
  
  .mattblackmenu li a {
      float: left;
      display: block;
      text-decoration: none;
      margin: 0;
      padding: 6px 8px;
          /*padding inside each tab*/
      border-right: 1px solid white;
          /*right divider between tabs*/
      color: white;
      background: #414141;
  }
  
  .mattblackmenu li a:visited {
      color: white;
  }
  
  .mattblackmenu li a:hover {
      background: black;
          /*background of tabs for hover state */
  }
  
  .mattblackmenu a.selected {
      background: black;
          /*background of tab with "selected" class assigned to its LI */
  }
  </style>
  <div id="ddtopmenubar" class="mattblackmenu">
      <ul>
          <li>
              <a href="#">LINK1</a>
          </li>
          <li>
              <a href="#" rel="ddsubmenu1">LINK2</a>
          </li>
          <li>
              <a href="#" rel="ddsubmenu2">LINK3</a>
          </li>
          <li>
              <a href="#">Link4</a>
          </li>
          <li>
              <a href="#" rel="ddsubmenu3">LINK5</a>
          </li>
      </ul>
  </div>
  <script type="text/javascript">
      ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid",
  
  "topbar|sidebar")
  </script>
  <ul class='ddsubmenustyle' id='ddsubmenu1'>
      <li>
          <a href='#'>LINK2 ITEM 1</a>
      </li>
      <li>
          <a href='#'>LINK2 ITEM 2</a>
          <ul>
              <li>
                  <a href='#'>LINK2 ITEM 2.1</a>
              </li>
              <li>
                  <a href='#'>LINK2 ITEM 2.2</a>
              </li>
          </ul>
      </li>
      <li>
          <a href='#'>LINK2 ITEM 3</a>
          <ul>
              <li>
                  <a href='#'>LINK2 ITEM 3.1</a>
              </li>
          </ul>
      </li>
      <li>
          <a href='#'>LINK2 ITEM 4</a>
      </li>
  </ul>
  <ul class='ddsubmenustyle' id='ddsubmenu2'>
      <li>
          <a href='#'>LINK3 ITEM 1</a>
      </li>
      <li>
          <a href='#'>LINK3 ITEM 2</a>
      </li>
      <li>
          <a href='#'>LINK3 ITEM 3</a>
          <ul>
              <li>
                  <a href='#'>LINK3 ITEM 3.1</a>
              </li>
              <li>
                  <a href='#'>LINK3 ITEM 3.2</a>
              </li>
              <li>
                  <a href='#'>LINK3 ITEM 3.3</a>
              </li>
              <li>
                  <a href='#'>LINK3 ITEM 3.4</a>
              </li>
          </ul>
      </li>
      <li>
          <a href='#'>LINK3 ITEM 4</a>
      </li>
      <li>
          <a href='#'>LINK3 ITEM 5</a>
          <ul>
              <li>
                  <a href='#'>LINK3 ITEM 5.1</a>
              </li>
              <li>
                  <a href='#'>LINK3 ITEM 5.2</a>
                  <ul>
                      <li>
                          <a href='#'>LINK3 ITEM 5.2 1</a>
                      </li>
                      <li>
                          <a href='#'>LINK3 ITEM 5.2 2</a>
                      </li>
                      <li>
                          <a href='#'>LINK3 ITEM 5.2 3</a>
                      </li>
                  </ul>
              </li>
          </ul>
      </li>
      <li>
          <a href='#'>LINK3 ITEM 6</a>
      </li>
  </ul>
  <ul class='ddsubmenustyle' id='ddsubmenu3'>
      <li>
          <a href='#'>LINK5 ITEM 1</a>
      </li>
      <li>
          <a href='#'>LINK5 ITEM 2</a>
      </li>
      <li>
          <a href='#'>LINK5 ITEM 3</a>
      </li>
      <li>
          <a href='#'>LINK5 ITEM 4</a>
      </li>
      <li>
          <a href='#'>LINK5 ITEM 5</a>
      </li>
  </ul>

  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

  1.     Here normal ul and li rules are applied
         To change background simply change background: #414141;
         Replace every # with your own link
         To create a drop down menu inside a Main Menu link simple

      add to it a rel attribute

  2.  like rel="ddsubmenu1 Change the drop down number accordingly.