FREE GPRS AND 3G TRICKS: Create Multi Level Drop Down Menu In Blogger

This is a multi level drop down menu so that it will help you a ot to organize your categories and some important links,also it will help your readers to easily navigate through your blog.The HTML structure of this menu is so easy as you have to use only <ul> and <li> tags,but you have to add a different ul id for a new drop down,that is the little negative point of this menu.Just follow below steps carefully,you will easily add this menu to your blog.Now lets see how to add it to blogger blog,First take a demo of the menu.

How To Add Multi Level Drop Down Menu To Blogger

Go to Blogger Dashboard > Layout
Click on Add a Gadget (below header)
Select HTML/JavaScript
Paste below code inside it.

<br />
<pre><code><script 
type='text/javascript'></code></pre>
<pre><code> </code></pre>
<pre><code>//** All Levels Navigational Menu- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/
//** Usage Terms: http://www.dynamicdrive.com/notice.htm

//** Current version: 3.02 See changelog.txt for details

if (typeof dd_domreadycheck=="undefined") //global variable to detect if DOM is ready
 var dd_domreadycheck=false

var ddlevelsmenu={
enableshim: true, //enable IFRAME shim to prevent drop down menus from being hidden below SELECT or FLASH elements? (tip: disable if not in use, for efficiency)

arrowpointers:{
 downarrow: ["http://1.bp.blogspot.com/-8CsFG7HWkos/T8o5nSpSnWI/AAAAAAAAB3I/7A4hohJANEM/s1600/helperblogger.com-arrow-down.gif", 11,7], //[path_to_down_arrow, arrowwidth, arrowheight]
 rightarrow: ["http://3.bp.blogspot.com/-NjdLcKUwgLA/T8o5oRsLskI/AAAAAAAAB3Q/CY1mCsobpdA/s1600/helperblogger.com-arrow-right.gif", 12,12], //[path_to_right_arrow, arrowwidth, arrowheight]
 showarrow: {toplevel: true, sublevel: true} //Show arrow images on top level items and sub level items, respectively?
},
hideinterval: 200, //delay in milliseconds before entire menu disappears onmouseout.
effects: {enableswipe: true, enableslide: true, enablefade: true, duration: 200},
httpsiframesrc: "blank.htm", //If menu is run on a secure (https) page, the IFRAME shim feature used by the script should point to an *blank* page *within* the secure area to prevent an IE security prompt. Specify full URL to that page on your server (leave as is if not applicable).

///No need to edit beyond here////////////////////

topmenuids: [], //array containing ids of all the primary menus on the page
topitems: {}, //object array containing all top menu item links
subuls: {}, //object array containing all ULs
lastactivesubul: {}, //object object containing info for last mouse out menu item's UL
topitemsindex: -1,
ulindex: -1,
hidetimers: {}, //object array timer
shimadded: false,
nonFF: !/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent), //detect non FF browsers
ismobile:navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile browsers

getoffset:function(what, offsettype){
 return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype]
},

getoffsetof:function(el){
 el._offsets={left:this.getoffset(el, "offsetLeft"), top:this.getoffset(el, "offsetTop")}
},

getwindowsize:function(){
 this.docwidth=window.innerWidth? window.innerWidth-10 : this.standardbody.clientWidth-10
 this.docheight=window.innerHeight? window.innerHeight-15 : this.standardbody.clientHeight-18
},

gettopitemsdimensions:function(){
 for (var m=0; m<this.topmenuids.length; m++){
  var topmenuid=this.topmenuids[m]
  for (var i=0; i<this.topitems[topmenuid].length; i++){
   var header=this.topitems[topmenuid][i]
   var submenu=document.getElementById(header.getAttribute('rel'))
   header._dimensions={w:header.offsetWidth, h:header.offsetHeight, submenuw:submenu.offsetWidth, submenuh:submenu.offsetHeight}
  }
 }
},

isContained:function(m, e){
 var e=window.event || e
 var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
 while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
 if (c==m)
  return true
 else
  return false
},

addpointer:function(target, imgclass, imginfo, BeforeorAfter){
 var pointer=document.createElement("img")
 pointer.src=imginfo[0]
 pointer.style.width=imginfo[1]+"px"
 pointer.style.height=imginfo[2]+"px"
 if(imgclass=="rightarrowpointer"){
  pointer.style.left=target.offsetWidth-imginfo[2]-2+"px"
 }
 pointer.className=imgclass
 var target_firstEl=target.childNodes[target.firstChild.nodeType!=1? 1 : 0] //see if the first child element within A is a SPAN (found in sliding doors technique)
 if (target_firstEl && target_firstEl.tagName=="SPAN"){
  target=target_firstEl //arrow should be added inside this SPAN instead if found
 }
 if (BeforeorAfter=="before")
  target.insertBefore(pointer, target.firstChild)
 else
  target.appendChild(pointer)
},

css:function(el, targetclass, action){
 var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
 if (action=="check")
  return needle.test(el.className)
 else if (action=="remove")
  el.className=el.className.replace(needle, "")
 else if (action=="add" && !needle.test(el.className))
  el.className+=" "+targetclass
},

addshimmy:function(target){
 var shim=(!window.opera)? document.createElement("iframe") : document.createElement("div") //Opera 9.24 doesnt seem to support transparent IFRAMEs
 shim.className="ddiframeshim"
 shim.setAttribute("src", location.protocol=="https:"? this.httpsiframesrc : "about:blank")
 shim.setAttribute("frameborder", "0")
 target.appendChild(shim)
 try{
  shim.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)'
 }
 catch(e){}
 return shim
},

positionshim:function(header, submenu, dir, scrollX, scrollY){
 if (header._istoplevel){
  var scrollY=window.pageYOffset? window.pageYOffset : this.standardbody.scrollTop
  var topgap=header._offsets.top-scrollY
  var bottomgap=scrollY+this.docheight-header._offsets.top-header._dimensions.h
  if (topgap>0){
   this.shimmy.topshim.style.left=scrollX+"px"
   this.shimmy.topshim.style.top=scrollY+"px"
   this.shimmy.topshim.style.width="99%"
   this.shimmy.topshim.style.height=topgap+"px" //distance from top window edge to top of menu item
  }
  if (bottomgap>0){
   this.shimmy.bottomshim.style.left=scrollX+"px"
   this.shimmy.bottomshim.style.top=header._offsets.top + header._dimensions.h +"px"
   this.shimmy.bottomshim.style.width="99%"
   this.shimmy.bottomshim.style.height=bottomgap+"px" //distance from bottom of menu item to bottom window edge
  }
 }
},

hideshim:function(){
 this.shimmy.topshim.style.width=this.shimmy.bottomshim.style.width=0
 this.shimmy.topshim.style.height=this.shimmy.bottomshim.style.height=0
},

buildmenu:function(mainmenuid, header, submenu, submenupos, istoplevel, dir){
 header._master=mainmenuid //Indicate which top menu this header is associated with
 header._pos=submenupos //Indicate pos of sub menu this header is associated with
 header._istoplevel=istoplevel
 if (istoplevel){
  this.addEvent(header, function(e){
  ddlevelsmenu.hidemenu(ddlevelsmenu.subuls[this._master][parseInt(this._pos)].parentNode)
  }, "click")
 }
 this.subuls[mainmenuid][submenupos]=submenu
 header._dimensions={w:header.offsetWidth, h:header.offsetHeight, submenuw:submenu.offsetWidth, submenuh:submenu.offsetHeight}
 this.getoffsetof(header)
 submenu.parentNode.style.left=0
 submenu.parentNode.style.top=0
 submenu.parentNode.style.visibility="hidden"
 submenu.style.visibility="hidden"
 this.addEvent(header, function(e){ //mouseover event
  if (ddlevelsmenu.ismobile || !ddlevelsmenu.isContained(this, e)){
   var submenu=ddlevelsmenu.subuls[this._master][parseInt(this._pos)]
   if (this._istoplevel){
    ddlevelsmenu.css(this, "selected", "add")
    clearTimeout(ddlevelsmenu.hidetimers[this._master][this._pos])
   }
   ddlevelsmenu.getoffsetof(header)
   var scrollX=window.pageXOffset? window.pageXOffset : ddlevelsmenu.standardbody.scrollLeft
   var scrollY=window.pageYOffset? window.pageYOffset : ddlevelsmenu.standardbody.scrollTop
   var submenurightedge=this._offsets.left + this._dimensions.submenuw + (this._istoplevel && dir=="topbar"? 0 : this._dimensions.w)
   var submenubottomedge=this._offsets.top + this._dimensions.submenuh
   //Sub menu starting left position
   var menuleft=(this._istoplevel? this._offsets.left + (dir=="sidebar"? this._dimensions.w : 0) : this._dimensions.w)
   if (submenurightedge-scrollX>ddlevelsmenu.docwidth){
    menuleft+= -this._dimensions.submenuw + (this._istoplevel && dir=="topbar" ? this._dimensions.w : -this._dimensions.w)
   }
   submenu.parentNode.style.left=menuleft+"px"
   //Sub menu starting top position
   var menutop=(this._istoplevel? this._offsets.top + (dir=="sidebar"? 0 : this._dimensions.h) : this.offsetTop)
   if (submenubottomedge-scrollY>ddlevelsmenu.docheight){ //no room downwards?
    if (this._dimensions.submenuh<this._offsets.top+(dir=="sidebar"? this._dimensions.h : 0)-scrollY){ //move up?
     menutop+= - this._dimensions.submenuh + (this._istoplevel && dir=="topbar"? -this._dimensions.h : this._dimensions.h)
    }
    else{ //top of window edge
     menutop+= -(this._offsets.top-scrollY) + (this._istoplevel && dir=="topbar"? -this._dimensions.h : 0)
    }
   }
   submenu.parentNode.style.top=menutop+"px"
   if (ddlevelsmenu.enableshim && (ddlevelsmenu.effects.enableswipe==false || ddlevelsmenu.nonFF)){ //apply shim immediately only if animation is turned off, or if on, in non FF2.x browsers
    ddlevelsmenu.positionshim(header, submenu, dir, scrollX, scrollY)
   }
   else{
    submenu.FFscrollInfo={x:scrollX, y:scrollY}
   }
   ddlevelsmenu.showmenu(header, submenu, dir)
   if (!ddlevelsmenu.ismobile){
    if (e.preventDefault)
     e.preventDefault()
    if (e.stopPropagation)
     e.stopPropagation()
   }
   else{ //if is mobile
    if (header._istoplevel || e.target.parentNode.getElementsByTagName('ul').length>0){ //if user clicks on a header (instead of a menu item)
     e.preventDefault()
     e.stopPropagation()
    }
   }
  }
 }, (this.ismobile)? "click" : "mouseover")
 this.addEvent(header, function(e){ //mouseout event
  var submenu=ddlevelsmenu.subuls[this._master][parseInt(this._pos)]
  if (this._istoplevel){
   if (!ddlevelsmenu.isContained(this, e) && !ddlevelsmenu.isContained(submenu.parentNode, e)) //hide drop down div if mouse moves out of menu bar item but not into drop down div itself
    ddlevelsmenu.hidemenu(submenu.parentNode)
  }
  else if (!this._istoplevel && !ddlevelsmenu.isContained(this, e)){
   ddlevelsmenu.hidemenu(submenu.parentNode)
  }

}, "mouseout")
},

setopacity:function(el, value){
 el.style.opacity=value
 if (typeof el.style.opacity!="string"){ //if it's not a string (ie: number instead), it means property not supported
  el.style.MozOpacity=value
  try{
   if (el.filters){
    el.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity="+ value*100 +")"
   }
  } catch(e){}
 }
},

showmenu:function(header, submenu, dir){
 if (this.effects.enableswipe || this.effects.enablefade){
  if (this.effects.enableswipe){
   var endpoint=(header._istoplevel && dir=="topbar")? header._dimensions.submenuh : header._dimensions.submenuw
   submenu.parentNode.style.width=submenu.parentNode.style.height=0
   submenu.parentNode.style.overflow="hidden"
  }
  if (this.effects.enablefade){
   submenu.parentNode.style.width=submenu.offsetWidth+"px"
   submenu.parentNode.style.height=submenu.offsetHeight+"px"
   this.setopacity(submenu.parentNode, 0) //set opacity to 0 so menu appears hidden initially
  }
  submenu._curanimatedegree=0
  submenu.parentNode.style.visibility="visible"
  submenu.style.visibility="visible"
  clearInterval(submenu._animatetimer)
  submenu._starttime=new Date().getTime() //get time just before animation is run
  submenu._animatetimer=setInterval(function(){ddlevelsmenu.revealmenu(header, submenu, endpoint, dir)}, 10)
 }
 else{
  submenu.parentNode.style.visibility="visible"
  submenu.style.visibility="visible"
 }
},

revealmenu:function(header, submenu, endpoint, dir){
 var elapsed=new Date().getTime()-submenu._starttime //get time animation has run
 if (elapsed<this.effects.duration){
  if (this.effects.enableswipe){
   if (submenu._curanimatedegree==0){ //reset either width or height of sub menu to "auto" when animation begins
    submenu.parentNode.style[header._istoplevel && dir=="topbar"? "width" : "height"]=(header._istoplevel && dir=="topbar"? submenu.offsetWidth : submenu.offsetHeight)+"px"
   }
   submenu.parentNode.style[header._istoplevel && dir=="topbar"? "height" : "width"]=(submenu._curanimatedegree*endpoint)+"px"
   if (this.effects.enableslide){
    submenu.style[header._istoplevel && dir=="topbar"? "top" : "left"]=Math.floor((submenu._curanimatedegree-1)*endpoint)+"px"
   }
  }
  if (this.effects.enablefade){
   this.setopacity(submenu.parentNode, submenu._curanimatedegree)
  }
 }
 else{
  clearInterval(submenu._animatetimer)
  if (this.effects.enableswipe){
   submenu.parentNode.style.width=submenu.offsetWidth+"px"
   submenu.parentNode.style.height=submenu.offsetHeight+"px"
   submenu.parentNode.style.overflow="visible"
   if (this.effects.enableslide){
    submenu.style.top=0;
    submenu.style.left=0;
   }
  }
  if (this.effects.enablefade){
   this.setopacity(submenu.parentNode, 1)
   submenu.parentNode.style.filter=""
  }
  if (this.enableshim && submenu.FFscrollInfo) //if this is FF browser (meaning shim hasn't been applied yet
   this.positionshim(header, submenu, dir, submenu.FFscrollInfo.x, submenu.FFscrollInfo.y)
 }
 submenu._curanimatedegree=(1-Math.cos((elapsed/this.effects.duration)*Math.PI)) / 2
},

hidemenu:function(submenu){
 if (typeof submenu._pos!="undefined"){ //if submenu is outermost DIV drop down menu
  this.css(this.topitems[submenu._master][parseInt(submenu._pos)], "selected", "remove")
  if (this.enableshim)
   this.hideshim()
 }
 clearInterval(submenu.firstChild._animatetimer)
 submenu.style.left=0
 submenu.style.top="-1000px"
 submenu.style.visibility="hidden"
 submenu.firstChild.style.visibility="hidden"
},

addEvent:function(target, functionref, tasktype) {
 if (target.addEventListener)
  target.addEventListener(tasktype, functionref, false);
 else if (target.attachEvent)
  target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
},

domready:function(functionref){ //based on code from the jQuery library
 if (dd_domreadycheck){
  functionref()
  return
 }
 // Mozilla, Opera and webkit nightlies currently support this event
 if (document.addEventListener) {
  // Use the handy event callback
  document.addEventListener("DOMContentLoaded", function(){
   document.removeEventListener("DOMContentLoaded", arguments.callee, false )
   functionref();
   dd_domreadycheck=true
  }, false )
 }
 else if (document.attachEvent){
  // If IE and not an iframe
  // continually check to see if the document is ready
  if ( document.documentElement.doScroll && window == window.top) (function(){
   if (dd_domreadycheck){
    functionref()
    return
   }
   try{
    // If IE is used, use the trick by Diego Perini
    // http://javascript.nwbox.com/IEContentLoaded/
    document.documentElement.doScroll("left")
   }catch(error){
    setTimeout( arguments.callee, 0)
    return;
   }
   //and execute any waiting functions
   functionref();
   dd_domreadycheck=true
  })();
 }
 if (document.attachEvent && parent.length>0) //account for page being in IFRAME, in which above doesn't fire in IE
  this.addEvent(window, function(){functionref()}, "load");
},

init:function(mainmenuid, dir){
 this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
 this.topitemsindex=-1
 this.ulindex=-1
 this.topmenuids.push(mainmenuid)
 this.topitems[mainmenuid]=[] //declare array on object
 this.subuls[mainmenuid]=[] //declare array on object
 this.hidetimers[mainmenuid]=[] //declare hide entire menu timer
 if (this.enableshim && !this.shimadded){
  this.shimmy={}
  this.shimmy.topshim=this.addshimmy(document.body) //create top iframe shim obj
  this.shimmy.bottomshim=this.addshimmy(document.body) //create bottom iframe shim obj
  this.shimadded=true
 }
 var menubar=document.getElementById(mainmenuid)
 var alllinks=menubar.getElementsByTagName("a")
 this.getwindowsize()
 for (var i=0; i<alllinks.length; i++){
  if (alllinks[i].getAttribute('rel')){
   this.topitemsindex++
   this.ulindex++
   var menuitem=alllinks[i]
   this.topitems[mainmenuid][this.topitemsindex]=menuitem //store ref to main menu links
   var dropul=document.getElementById(menuitem.getAttribute('rel'))
   var shelldiv=document.createElement("div") // create DIV which will contain the UL
   shelldiv.className="ddsubmenustyle"
   dropul.removeAttribute("class")
   shelldiv.appendChild(dropul)
   document.body.appendChild(shelldiv) //move main DIVs to end of document
   shelldiv.style.zIndex=2000 //give drop down menus a high z-index
   shelldiv._master=mainmenuid  //Indicate which main menu this main DIV is associated with
   shelldiv._pos=this.topitemsindex //Indicate which main menu item this main DIV is associated with
   this.addEvent(shelldiv, function(){ddlevelsmenu.hidemenu(this)}, "click")
   var arrowclass=(dir=="sidebar")? "rightarrowpointer" : "downarrowpointer"
   var arrowpointer=(dir=="sidebar")? this.arrowpointers.rightarrow : this.arrowpointers.downarrow
   if (this.arrowpointers.showarrow.toplevel)
    this.addpointer(menuitem, arrowclass, arrowpointer, (dir=="sidebar")? "before" : "after")
   this.buildmenu(mainmenuid, menuitem, dropul, this.ulindex, true, dir) //build top level menu
   shelldiv.onmouseover=function(){
    clearTimeout(ddlevelsmenu.hidetimers[this._master][this._pos])
   }
   this.addEvent(shelldiv, function(e){ //hide menu if mouse moves out of main DIV element into open space
    if (!ddlevelsmenu.isContained(this, e) && !ddlevelsmenu.isContained(ddlevelsmenu.topitems[this._master][parseInt(this._pos)], e)){
     var dropul=this
     if (ddlevelsmenu.enableshim)
      ddlevelsmenu.hideshim()
     ddlevelsmenu.hidetimers[this._master][this._pos]=setTimeout(function(){
      ddlevelsmenu.hidemenu(dropul)
     }, ddlevelsmenu.hideinterval)
    }
   }, "mouseout")
   var subuls=dropul.getElementsByTagName("ul")
   for (var c=0; c<subuls.length; c++){
    this.ulindex++
    var parentli=subuls[c].parentNode
    var subshell=document.createElement("div")
    subshell.appendChild(subuls[c])
    parentli.appendChild(subshell)
    if (this.arrowpointers.showarrow.sublevel)
     this.addpointer(parentli.getElementsByTagName("a")[0], "rightarrowpointer", this.arrowpointers.rightarrow, "before")
    this.buildmenu(mainmenuid, parentli, subuls[c], this.ulindex, false, dir) //build sub level menus
   }
  }
 } //end for loop
 this.addEvent(window, function(){ddlevelsmenu.getwindowsize(); ddlevelsmenu.gettopitemsdimensions()}, "resize")
},

setup:function(mainmenuid, dir){
 this.domready(function(){ddlevelsmenu.init(mainmenuid, dir)})
}

} </code></pre>
<pre><code> </code></pre>
<pre><code> </code></pre>
<pre><code> </code></pre>
<pre><code> </code></pre>
<pre><code></script>
<style>
/* ######### Drop Down Menu By http://freegprs3g.blogspot.in ######### */    
/* ######### 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;
    <span style="background-color: lime;">background: #414141;</span>
    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="#" <span style="background-color: #ea9999;">rel="ddsubmenu1</span>">LINK2</a>
        </li>
<li>
            <a href="#" <span style="background-color: #f9cb9c;">rel="ddsubmenu2</span>">LINK3</a>
        </li>
<li>
            <a href="#">Link4</a>
        </li>
<li>
            <a href="#" <span style="background-color: #b6d7a8;">rel="ddsubmenu3</span>">LINK5</a>
        </li>
</ul>
</div>
<script type="text/javascript">
    ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<ul class='ddsubmenustyle' <span style="background-color: #a2c4c9;">id='ddsubmenu1</span>'>
<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' <span style="background-color: #9fc5e8;">id='ddsubmenu2</span>'>
<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' <span style="background-color: #d5a6bd;">id='ddsubmenu3</span>'>
<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>
</code></pre>
<pre><code>

How to Customize It?

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 like rel="ddsubmenu1 Change the drop down number accordingly.

Use HTML Editor?

I highly recommend you to use the HTML Editor as you can edit and see live demo of your menu in HTML Editor.

Further Help?

Many newbies bloggers gets the problem while adding links and texts.If you are getting the same problem then simply provide a tree menu of your menu,I will build the HTML part for you.Also feel free to ask your any little query...

Drop Down Menu

dropdown SAP

Create Multi Level Drop Down Menu In Blogger

How To Add Multi Level Drop Down Menu To Blogger

How to Customize It?

Use HTML Editor?

Further Help?