Download list based DHTML menu

Licensing

This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.

Use a strict or loose doctype

This menu requires a valid doctype in order to look good in Opera. You can either choose the strict doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
or a loose doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Choose the one that makes your page look best across different browsers. The doctype tag should be placed on the first line of your HTML file.

Put this into your <HEAD> section

	<style type="text/css">
	/* 
	General styles for this example page */
	html{
		height:100%;
	}
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		font-size:0.8em;
		margin:0px;
		padding:0px;
		text-align:center;
		background-color:#E2EBED;
		height:100%;
	}
	
	p{
		margin-top:5px;
		margin-bottom:10px;
	}
	
	#mainContainer{
		width:760px;
		margin:0 auto;
		text-align:left;
		background-color: #FFF;
		padding-left:16px;
		padding-right:16px;
		padding-bottom:20px;	
	}
	
	#dhtmlgoodies_menu img{
		border:0px;
	}

	/* End general styles for this example page */
	/* General configuration CSS */
	
	#dhtmlgoodies_menu ul li ul{
		display:none;	/* Needed to display ok in Opera */
	}
		
	#dhtmlgoodies_menu{
		visibility:hidden;	
	}
	#dhtmlgoodies_menu ul{
		margin:0px;	/* No indent */
		padding:0px;	/* No indent */
	}
	#dhtmlgoodies_menu li{
		list-style-type:none;	/* No bullets */
	}	
	#dhtmlgoodies_menu a{

		margin:0px;
		padding:0px;
	}
	/* End general configuration CSS */
	
	
	/* Cosmetic */
	
	/***********************************************************************
		CSS - MENU BLOCKS
	 	General rules for all menu blocks (group of sub items) 
	***********************************************************************/
	#dhtmlgoodies_menu ul{
		border:1px solid #000;
		background-color:#FFF;
		padding:1px;
	}
		
	#dhtmlgoodies_menu ul.menuBlock1{	/* Menu bar - main menu items */
		border:0px;
		padding:1px;
		border:1px solid #317082;
		background-color:#E2EBED;
		overflow:visible;
	}
	#dhtmlgoodies_menu ul.menuBlock2{	/* Menu bar - main menu items */
		border:0px;
		padding:1px;
		border:1px solid #555;
	}
	
	/***********************************************************************
		CSS - MENU ITEMS
	 	Here, you could assign rules to the menu items at different depths.
	***********************************************************************/
	/* General rules for all menu items */
	#dhtmlgoodies_menu a{
		color: #000;
		text-decoration:none;
		padding-left:2px;
		padding-right:2px;
	
	}
	
	/*
	Main menu items 
	*/
	
	#dhtmlgoodies_menu .currentDepth1{
		padding-left:5px;
		padding-right:5px;
		border:1px solid #E2EBED;
	}
	#dhtmlgoodies_menu .currentDepth1over{
		padding-left:5px;
		padding-right:5px;
		background-color:#317082;
		border:1px solid #000;
		
		
	}
	#dhtmlgoodies_menu .currentDepth1 a{
		font-weight:bold;
	}
	#dhtmlgoodies_menu .currentDepth1over a{	/* Text rules */
		color:#FFF;
		font-weight:bold;
	}
	
	/* Sub menu depth 1 */
	#dhtmlgoodies_menu .currentDepth2{
		padding-right:2px;
		border:1px solid #FFF;
	}
	#dhtmlgoodies_menu .currentDepth2over{
		padding-right:2px;
		background-color:#E2EBED;
		border:1px solid #000;
	}	
	#dhtmlgoodies_menu .currentDepth2over a{	/* Text rules */
		color:#000;
	}	
	/* Sub menu depth 2 */
	#dhtmlgoodies_menu .currentDepth3{
		padding-right:2px;
		border:1px solid #FFF;
	}
	#dhtmlgoodies_menu .currentDepth3over{
		padding-right:2px;
		background-color:#EDE3EB;
		border:1px solid #000;
	}
	/* Sub menu depth 3 */
	#dhtmlgoodies_menu .currentDepth4{
		padding-right:2px;
		border:1px solid #FFF;
	}
	#dhtmlgoodies_menu .currentDepth4over{
		padding-right:2px;
		background-color:#EBEDE3;
		border:1px solid #000;
	}	
	
	
	


	</style>
	<script type="text/javascript">
	/************************************************************************************************************
	Copyright (C) October 2005  DTHMLGoodies.com, Alf Magne Kalleland

	This library is free software; you can redistribute it and/or
	modify it under the terms of the GNU Lesser General Public
	License as published by the Free Software Foundation; either
	version 2.1 of the License, or (at your option) any later version.

	This library is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
	Lesser General Public License for more details.

	You should have received a copy of the GNU Lesser General Public
	License along with this library; if not, write to the Free Software
	Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

	Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
	written by Alf Magne Kalleland.

	Alf Magne Kalleland, 2010
	Owner of DHTMLgoodies.com

	************************************************************************************************************/
        
   var dhtmlgoodies_menuObj;   // Reference to the menu div 
   var currentZIndex = 1000; 
   var liIndex = 0; 
   var visibleMenus = new Array(); 
   var activeMenuItem = false; 
   var timeBeforeAutoHide = 1200; // Microseconds from mouse leaves menu to auto hide. 
   var dhtmlgoodies_menu_arrow = 'http://www.dhtmlgoodies.com/scripts/dhtmlgoodies-menu2/images/arrow.gif'; 
    
   var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false; 
   var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox')>=0?true:false; 
   var navigatorVersion = navigator.appVersion.replace(/.*?MSIE ([0-9]\.[0-9]).*/g,'$1')/1; 
   var menuBlockArray = new Array(); 
   var menuParentOffsetLeft = false;    


    // {{{ getStyle() 
   /** 
   * Return specific style attribute for an element 
   * 
   * @param Object el = Reference to HTML element 
   * @param String property = Css property 
   * @private 
   */        
   function getStyle(el,property) 
   {        

      if (document.defaultView && document.defaultView.getComputedStyle) { 

         var retVal = null;              
         var comp = document.defaultView.getComputedStyle(el, ''); 
         if (comp){ 
            retVal = comp[property]; 
              
            if(!retVal){ 
               var comp = document.defaultView.getComputedStyle(el, null); 
               retVal = comp.getPropertyCSSValue(property); 
            }          
         }    

         if(retVal==null)retVal=''; 
          
         return el.style[property] || retVal; 
      } 
      if (document.documentElement.currentStyle && MSIE){    
         var value = el.currentStyle ? el.currentStyle[property] : null; 
         return ( el.style[property] || value ); 
                                              
      } 
      return el.style[property];              
   } 
      
   function getTopPos(inputObj) 
   { 
   	var origInputObj = inputObj;
 
     var returnValue = inputObj.offsetTop; 
     if(inputObj.tagName=='LI' && inputObj.parentNode.className=='menuBlock1'){    
        var aTag = inputObj.getElementsByTagName('A')[0]; 
        if(aTag)returnValue += aTag.parentNode.offsetHeight; 
     } 
     var topOfMenuReached = false; 
     while((inputObj = inputObj.offsetParent) != null){ 
        if(inputObj.parentNode.id=='dhtmlgoodies_menu')topOfMenuReached=true; 
        if(topOfMenuReached && !inputObj.className.match(/menuBlock/gi) || (!MSIE && origInputObj.parentNode.className=='menuBlock1')){ 
           var style = getStyle(inputObj,'position'); 
           if(style=='absolute' || style=='relative'){                
              return returnValue;            
           } 
        } 
          
        returnValue += inputObj.offsetTop;          
     } 

     return returnValue; 
   } 
    
   function getLeftPos(inputObj) 
   { 
     var returnValue = inputObj.offsetLeft; 
      
     var topOfMenuReached = false; 
     while((inputObj = inputObj.offsetParent) != null){ 
       if(inputObj.parentNode.id=='dhtmlgoodies_menu')topOfMenuReached=true; 
        if(topOfMenuReached && !inputObj.className.match(/menuBlock/gi)){ 
           var style = getStyle(inputObj,'position'); 
           if(style=='absolute' || style=='relative')return returnValue; 
        } 
      
        returnValue += inputObj.offsetLeft; 
     } 
     return returnValue; 
   } 


    
   function showHideSub() 
   { 

      var attr = this.parentNode.getAttribute('currentDepth'); 
      if(navigator.userAgent.indexOf('Opera')>=0){ 
         attr = this.parentNode.currentDepth; 
      } 
        
      this.className = 'currentDepth' + attr + 'over'; 
        
      if(activeMenuItem && activeMenuItem!=this){ 
         activeMenuItem.className=activeMenuItem.className.replace(/over/,''); 
      } 
      activeMenuItem = this; 
    
      var numericIdThis = this.id.replace(/[^0-9]/g,''); 
      var exceptionArray = new Array(); 
      // Showing sub item of this LI 
      var sub = document.getElementById('subOf' + numericIdThis); 
      if(sub){ 
         visibleMenus.push(sub); 
         sub.style.display=''; 
         sub.parentNode.className = sub.parentNode.className + 'over'; 
         exceptionArray[sub.id] = true; 
      }    
        
      // Showing parent items of this one 
        
      var parent = this.parentNode; 
      while(parent && parent.id && parent.tagName=='UL'){ 
         visibleMenus.push(parent); 
         exceptionArray[parent.id] = true; 
         parent.style.display=''; 
          
         var li = document.getElementById('dhtmlgoodies_listItem' + parent.id.replace(/[^0-9]/g,'')); 
         if(li.className.indexOf('over')<0)li.className = li.className + 'over'; 
         parent = li.parentNode; 
          
      } 

          
      hideMenuItems(exceptionArray); 



   } 

   function hideMenuItems(exceptionArray) 
   { 
      /* 
      Hiding visible menu items 
      */ 
      var newVisibleMenuArray = new Array(); 
      for(var no=0;no<visibleMenus.length;no++){ 
         if(visibleMenus[no].className!='menuBlock1' && visibleMenus[no].id){ 
            if(!exceptionArray[visibleMenus[no].id]){ 
               var el = visibleMenus[no].getElementsByTagName('A')[0]; 
               visibleMenus[no].style.display = 'none'; 
               var li = document.getElementById('dhtmlgoodies_listItem' + visibleMenus[no].id.replace(/[^0-9]/g,'')); 
               if(li.className.indexOf('over')>0)li.className = li.className.replace(/over/,''); 
            }else{              
               newVisibleMenuArray.push(visibleMenus[no]); 
            } 
         } 
      }        
      visibleMenus = newVisibleMenuArray;        
   } 
    
    
    
   var menuActive = true; 
   var hideTimer = 0; 
   function mouseOverMenu() 
   { 
      menuActive = true;        
   } 
    
   function mouseOutMenu() 
   { 
      menuActive = false; 
      timerAutoHide();    
   } 
    
   function timerAutoHide() 
   { 
      if(menuActive){ 
         hideTimer = 0; 
         return; 
      } 
        
      if(hideTimer<timeBeforeAutoHide){ 
         hideTimer+=100; 
         setTimeout('timerAutoHide()',99); 
      }else{ 
         hideTimer = 0; 
         autohideMenuItems();    
      } 
   } 
    
   function autohideMenuItems() 
   { 
      if(!menuActive){ 
         hideMenuItems(new Array());    
         if(activeMenuItem)activeMenuItem.className=activeMenuItem.className.replace(/over/,'');        
      } 
   } 
    
    
   function initSubMenus(inputObj,initOffsetLeft,currentDepth) 
   {    
      var subUl = inputObj.getElementsByTagName('UL'); 
      if(subUl.length>0){ 
         var ul = subUl[0]; 
          
         ul.id = 'subOf' + inputObj.id.replace(/[^0-9]/g,''); 
         ul.setAttribute('currentDepth' ,currentDepth); 
         ul.currentDepth = currentDepth; 
         ul.className='menuBlock' + currentDepth; 
         ul.onmouseover = mouseOverMenu; 
         ul.onmouseout = mouseOutMenu; 
         currentZIndex+=1; 
         ul.style.zIndex = currentZIndex; 
         menuBlockArray.push(ul); 
         ul = dhtmlgoodies_menuObj.appendChild(ul); 
         var topPos = getTopPos(inputObj); 
         var leftPos = getLeftPos(inputObj)/1 + initOffsetLeft/1;          
         
         ul.style.position = 'absolute'; 
         ul.style.left = leftPos + 'px'; 
         ul.style.top = topPos + 'px'; 
         var li = ul.getElementsByTagName('LI')[0]; 
         while(li){ 
            if(li.tagName=='LI'){    
               li.className='currentDepth' + currentDepth;                
               li.id = 'dhtmlgoodies_listItem' + liIndex; 
               liIndex++;              
               var uls = li.getElementsByTagName('UL'); 
               li.onmouseover = showHideSub; 

               if(uls.length>0){ 
                  var offsetToFunction = li.getElementsByTagName('A')[0].offsetWidth+2; 
                  if(navigatorVersion<6 && MSIE)offsetToFunction+=15;   // MSIE 5.x fix 
                  initSubMenus(li,offsetToFunction,(currentDepth+1)); 
               }    
               if(MSIE){ 
                  var a = li.getElementsByTagName('A')[0]; 
                  a.style.width=li.offsetWidth+'px'; 
                  a.style.display='block'; 
               }                
            } 
            li = li.nextSibling; 
         } 
         ul.style.display = 'none';    
         if(!document.all){ 
            //dhtmlgoodies_menuObj.appendChild(ul); 
         } 
      }    
   } 


   function resizeMenu() 
   { 
      var offsetParent = getLeftPos(dhtmlgoodies_menuObj); 
        
      for(var no=0;no<menuBlockArray.length;no++){ 
         var leftPos = menuBlockArray[no].style.left.replace('px','')/1; 
         menuBlockArray[no].style.left = leftPos + offsetParent - menuParentOffsetLeft + 'px'; 
      } 
      menuParentOffsetLeft = offsetParent; 
   } 
    
   /* 
   Initializing menu 
   */ 
   function initDhtmlGoodiesMenu() 
   { 
      dhtmlgoodies_menuObj = document.getElementById('dhtmlgoodies_menu'); 
        
        
      var aTags = dhtmlgoodies_menuObj.getElementsByTagName('A'); 
      for(var no=0;no<aTags.length;no++){          

         var subUl = aTags[no].parentNode.getElementsByTagName('UL'); 
         if(subUl.length>0 && aTags[no].parentNode.parentNode.parentNode.id != 'dhtmlgoodies_menu'){ 
            var img = document.createElement('IMG'); 
            img.src = dhtmlgoodies_menu_arrow; 
            aTags[no].appendChild(img);              

         } 

      } 
              
      var mainMenu = dhtmlgoodies_menuObj.getElementsByTagName('UL')[0]; 
      mainMenu.className='menuBlock1'; 
      mainMenu.style.zIndex = currentZIndex; 
      mainMenu.setAttribute('currentDepth' ,1); 
      mainMenu.currentDepth = '1'; 
      mainMenu.onmouseover = mouseOverMenu; 
      mainMenu.onmouseout = mouseOutMenu;        

      var mainMenuItemsArray = new Array(); 
      var mainMenuItem = mainMenu.getElementsByTagName('LI')[0]; 
      mainMenu.style.height = mainMenuItem.offsetHeight + 2 + 'px'; 
      while(mainMenuItem){ 
          
         mainMenuItem.className='currentDepth1'; 
         mainMenuItem.id = 'dhtmlgoodies_listItem' + liIndex; 
         mainMenuItem.onmouseover = showHideSub; 
         liIndex++;              
         if(mainMenuItem.tagName=='LI'){ 
            mainMenuItem.style.cssText = 'float:left;';    
            mainMenuItem.style.styleFloat = 'left'; 
            mainMenuItemsArray[mainMenuItemsArray.length] = mainMenuItem; 
            initSubMenus(mainMenuItem,0,2); 
         }          
          
         mainMenuItem = mainMenuItem.nextSibling; 
          
      } 

      for(var no=0;no<mainMenuItemsArray.length;no++){ 
         initSubMenus(mainMenuItemsArray[no],0,2);          
      } 
        
      menuParentOffsetLeft = getLeftPos(dhtmlgoodies_menuObj);    
      window.onresize = resizeMenu;    
      dhtmlgoodies_menuObj.style.visibility = 'visible';    
   } 
	window.onload = initDhtmlGoodiesMenu;
	</script>

Put this into your <BODY> section

<div id="mainContainer">
<img src="http://www.dhtmlgoodies.com/images/heading3.gif">
<div id="dhtmlgoodies_menu">
	<ul>
		<li><a href="http://www.dhtmlgoodies.com">Products</a>
			<ul>
				<li><a href="http://www.dhtmlgoodies.com">Product 1</a></li>
				<li><a href="http://www.dhtmlgoodies.com">Product 2</a>
					<ul>
						<li><a href="http://www.dhtmlgoodies.com">Prices</a></li>
						<li><a href="http://www.dhtmlgoodies.com">White sheets</a></li>
						<li><a href="http://www.dhtmlgoodies.com">User manuals</a></li>
					</ul>
				</li>
			</ul>		
		</li>
		<li><a href="http://www.dhtmlgoodies.com">Support</a>			
			<ul>
				<li><a href="http://www.dhtmlgoodies.com">Contact Us</a></li>
				<li><a href="http://www.dhtmlgoodies.com">Report a bug</a>
					<ul>
						<li><a href="http://www.dhtmlgoodies.com">Product A</a></li>
						<li><a href="http://www.dhtmlgoodies.com">Product B</a></li>
						<li><a href="http://www.dhtmlgoodies.com">Another product</a></li>
					</ul>
				</li>
				<li><a href="http://www.dhtmlgoodies.com">Sub item 3</a>

					<ul>
						<li><a href="http://www.dhtmlgoodies.com">Sub item 3.1</a></li>
						<li><a href="http://www.dhtmlgoodies.com">Sub item 3.2</a>
							<ul>
								<li><a href="http://www.dhtmlgoodies.com">Sub item 3.2.1</a></li>
								<li><a href="http://www.dhtmlgoodies.com">Sub item 3.2.2</a></li>
								<li><a href="http://www.dhtmlgoodies.com">Sub item 3.2.3</a></li>
							</ul>
						</li>
						<li><a href="http://www.dhtmlgoodies.com">Sub item 3.3</a></li>
					</ul>
				</li>
				<li><a href="http://www.dhtmlgoodies.com">Sub item 4</a></li>
				<li><a href="http://www.dhtmlgoodies.com">Sub item 5</a></li>
			</ul>
		</li>
		<li><a href="http://www.dhtmlgoodies.com">Partners</a>
			<ul>
				<li><a href="http://www.dhtmlgoodies.com">Partner A</a></li>
				<li><a href="http://www.dhtmlgoodies.com">Partner B</a></li>
				<li><a href="http://www.dhtmlgoodies.com">Another partner</a></li>
				<li><a href="http://www.dhtmlgoodies.com">Our latest partners</a></li>
			</ul>	
		</li>
		<li><a href="http://www.dhtmlgoodies.com">Visions</a>
		<li><a href="http://www.dhtmlgoodies.com">History</a>
	</ul>
	</div>
	<p>	Splendida porro oculi fugitant vitantque tueri. sol etiam caecat, contra si tendere pergas,propterea quia vis magnast ipsius et altea�ra per purum simulacra ferunturet feriunt oculos turbantia composituras. Praeterea splendor qui cumque est acer adurit saepe oculos ideo quod semina possidet ignismulta, dolorem oculis quae gignunt insinuando.lurida praeterea fiunt quae cumque tuenturarquati, quia luroris de corpore eorumsemina multa fluunt simulacris obvia rerum, multaque sunt oculis in eorum denique mixta,quae contage sua palloribus omnia pingunt. </p>
		<p>E tenebris autem quae sunt in luce tuemurpropterea quia, cum propior caliginis a�rater init oculos prior et possedit apertos, insequitur candens confestim lucidus a�r,qui quasi purgat eos ac nigras discutit umbrasa�ris illius; nam multis partibus hic estmobilior multisque minutior et mage pollens.qui simul atque vias oculorum luce replevit atque pate fecit, quas ante obsederat a�r<ater>, continuo rerum simulacra secuntur, quae sita sunt in luce, lacessuntque ut videamus. quod contra facere in tenebris e luce nequimuspropterea quia posterior caliginis a�r crassior insequitur, qui cuncta foramina completobsiditque vias oculorum, ne simulacrapossint ullarum rerum coniecta moveri. Quadratasque procul turris cum cernimus urbis,propterea fit uti videantur saepe rutundae, angulus optusus quia longe cernitur omnissive etiam potius non cernitur ac perit eiusplaga nec ad nostras acies perlabitur ictus,a�ra per multum quia dum simulacra feruntur,cogit hebescere eum crebris offensibus a�r. hoc ubi suffugit sensum simul angulus omnis.fit quasi ut ad turnum saxorum structa tuantur;non tamen ut coram quae sunt vereque rutunda,sed quasi adumbratim paulum simulata videntur. </p>
		<p>Umbra videtur item nobis in sole moveri et vestigia nostra sequi gestumque imitari,a�ra si credis privatum lumine posseindugredi, motus hominum gestumque sequentem;nam nihil esse potest aliud nisi lumine cassusa�r id quod nos umbram perhibere su�mus. ni mirum, quia terra locis ex ordine certislumine privatur solis qua cumque meantesofficimus, repletur item quod liquimus eius,propterea fit uti videatur, quae fuit umbracorporis, e regione eadem nos usque secuta. semper enim nova se radiorum lumina funduntprimaque dispereunt, quasi in ignem lana trahatur.propterea facile et spoliatur lumine terraet repletur item nigrasque sibi abluit umbras. Nec tamen hic oculos falli concedimus hilum. nam quo cumque loco sit lux atque umbra tueriillorum est; eadem vero sint lumina necne,umbraque quae fuit hic eadem nunc transeat illuc,an potius fiat paulo quod diximus ante,hoc animi demum ratio discernere debet, nec possunt oculi naturam noscere rerum.proinde animi vitium hoc oculis adfingere noli. Qua vehimur navi, fertur, cum stare videtur;quae manet in statione, ea praeter creditur ire.et fugere ad puppim colles campique videntur, quos agimus praeter navem velisque volamus. 
		Sidera cessare aetheriis adfixa caverniscuncta videntur, et adsiduo sunt omnia motu,quandoquidem longos obitus exorta revisunt,cum permensa suo sunt caelum 
		corpore claro. solque pari ratione manere et luna videturin statione, ea quae ferri res indicat ipsa. Exstantisque procul medio de gurgite montisclassibus inter 
		quos liber patet exitus ingens,insula coniunctis tamen ex his una videtur. atria versari et circum cursare columnaeusque adeo fit uti pueris videantur, ubi 
		ipsidesierunt verti, vix ut iam credere possintnon supra sese ruere omnia tecta minari. Iamque rubrum tremulis iubar ignibus erigere alte cum coeptat 
		natura supraque extollere montes,quos tibi tum supra sol montis esse videturcomminus ipse suo contingens fervidus igni,vix absunt nobis missus bis mille 
		sagittae,vix etiam cursus quingentos saepe veruti. </P>
</p>
</div>

Configuration

This menu is completely list based. It means that you build the menu by creating a <UL><LI> list. This is how the menu code could look like:
<div id="dhtmlgoodies_menu">
  <ul>
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a>

      <ul>
        <li><a href="#">Sub item 1</a></li>
        <li><a href="#">This is a sub</a></li>
        <li><a href="#">Sub item 3</a>
          <ul>
            <li><a href="#">Sub item 3.1</a></li>
            <li><a href="#">Sub item 3.2</a>
              <ul>
                <li><a href="#">Sub item 3.2.1</a></li>
                <li><a href="#">Sub item 3.2.2</a></li>
                <li><a href="#">Sub item 3.2.3</a></li>
              </ul>
            </li>
            <li><a href="#">Sub item 3.3</a></li>
          </ul>
        </li>
        <li><a href="#">Sub item 4</a></li>
        <li><a href="#">Sub item 5</a></li>
      </ul>
    </li>
    <li><a href="#">Menu item 3</a>
      <ul>
        <li><a href="#">Sub item 3.1</a></li>
        <li><a href="#">Sub item 3.2</a></li>
        <li><a href="#">Sub item 3.3</a></li>
        <li><a href="#">Sub item 3.4</a></li>
      </ul>
    </li>
    <li><a href="#">Menu item 4</a>
    <li><a href="#">Menu item 5</a>
  </ul>
  </div>

Note that:

You need the <div id="dhtmlgoodies_menu"> as parent element of the unordered list
Each menu item should have this structure: <LI><A>...</A></LI>. I.e: A list item followed by an anchor tag. Use an empty href if you don't want a link on the menu item.

Adding styles to the menu

You use CSS(Cascading Style Sheet) to configure how the menu should look like. Example:
#dhtmlgoodies_menu ul.menuBlock1{  /* Menu bar - main menu items */
  border:0px;
  padding:3px;
  border:1px solid #317082;
  background-color:#E2EBED;
}
#dhtmlgoodies_menu ul.menuBlock2{  /* Menu bar - sub menu depth 1 */
  border:0px;
  padding:3px;
  border:1px solid #555;
}

The classes menuBlock1,menuBlock2 ... are used to apply styles to a group of menu items. Example: menuBlock1 specifies general styles for the group of main menu items(the <UL> tag), while menuBlock2 applies to all sub elements that are direct children of a main menu item.

There are some different classes for the specific menu items. Here's an example of this:
#dhtmlgoodies_menu .currentDepth1{
  padding-right:10px;
}
#dhtmlgoodies_menu .currentDepth1over{
  padding-right:10px;
  background-color:#317082;

}
#dhtmlgoodies_menu .currentDepth1over a{  /* Text rules */
  color:#FFF;
}

.currentDepth1 specifies a style for all main menu items(the <LI> tags). .currentDepth1over specifies rollover effects for all main menu items. .currentDepth1over a specifies rollover effects for main menu items(Text effects).

Download arrow

There's one image used in this script. That's the arrow indicating sub menu items. To download it, right click on the image below and select "Save target As". Put the image in a sub folder called images.

Javascript variables

There are two javascript variables which you could modify as you need. The first one specifies path to the arrow image:
var dhtmlgoodies_menu_arrow = 'images/arrow.gif';

The second one:
var timeBeforeAutoHide = 2000;
specifies how long the script should wait before it hides active menu items after the mouse cursor has moved away from the menu. The time is specified in microseconds(2000 = 2 seconds).