How do I create a new instance of this drop down menu?

I'm making a mess trying to figure this out lol - I've been at this trying to make it work for weeks!

I want to make another drop down menu - I think I have to create another instant of the "More..." drop down, but I'm not sure how to do it, I hope someone could give me a hand.

The html code for the header is:

<DIV id=tabs>
     <DIV class="tabsListItem  homeTab"><A href="home.php"><SPAN
id=homeTab></SPAN></A></DIV>
  {if $user->user_exists != 0}
     <DIV class="tabsListItem "><A href="user_home.php"><SPAN>Dashboard</SPAN></A></DIV>
     <DIV class="tabsListItem "><a href='{$url->url_create('profile',$user->user_info.user_username)}'><SPAN>My {lang_print id=652}</SPAN></A></DIV>
     <DIV class="tabsListItem "><A href="forum.php?iid=5&c=forum&op=index"><SPAN>Discussions</SPAN></A></DIV>


  {if $global_plugins.plugin_controls.show_menu_user}
   <DIV class="tabsListItem moreTab" onmouseover=openMoreMenu()
onmouseout=hideMoreMenu()><A id=more_tab href="java script:;"><SPAN>More...<IMG
style="PADDING-LEFT: 5px"
src="./templates/img/arrow.gif"></SPAN></A>
<DIV id=dropDownMenu style="DISPLAY: none">
     {* SHOW ANY PLUGIN MENU ITEMS *}
       {foreach from=$global_plugins key=plugin_k item=plugin_v}
       {if $plugin_v.menu_main != ''}
      <div class='dropDownMenuItem'><A href="{$plugin_v.menu_main.file}"><SPAN><img src='./images/icons/{$plugin_v.menu_user.icon}' border='0' class='menu_icon2' style="padding-top:8">{lang_print id=$plugin_v.menu_main.title}</SPAN></A></DIV>
       {/if}
       {/foreach}

</DIV>
{/if}
{/if}
</DIV>

Code (markup):

And the javascript file has this:

var timeOutHandle;function openMoreMenu(){var menu=document.getElementById('dropDownMenu');if(menu&&menu.style)menu.style.display='';if(typeof(timeOutHandle)!==undefined||timeOutHandle!==null){clearTimeout(timeOutHandle);}
var moreItem=document.getElementById("more_tab");if(moreItem){if(moreItem.offsetLeft)wide=moreItem.offsetLeft;else wide=351;document.getElementById("dropDownMenu").style.left=(wide-1)+"px";}
if(typeof dojo=='undefined')return;var apps=dojo.query('.apps');apps[0].className='apps tabsListItem selectedMore';if(dojo.isIE&&dojo.isIE<7&&typeof enableIFrame!='undefined')enableIFrame(menu,menu.clientWidth,menu.clientHeight+44);}
function hideMoreMenu(){timeOutHandle=setTimeout(function(){hideMoreMenuNow();},250);}
function hideMoreMenuNow(){if(typeof(timeOutHandle)!==undefined||timeOutHandle!==null){clearTimeout(timeOutHandle);}
var menu=document.getElementById('dropDownMenu');if(menu&&menu.style)menu.style.display='none';if(typeof dojo=='undefined')return;if(menu){if(dojo.isIE&&dojo.isIE<7){var ifId=menu.id+'_iframe';var iFrame=document.getElementById(ifId);if(iFrame&&iFrame.style)hide(iFrame);}}
var apps=dojo.query('.apps');if(apps[0])apps[0].className='apps tabsListItem';}

Code (markup):

I wouldn't think that you need the CSS code.

So, does anyone know how I can duplicate the "More..." drop down menu?

Thanks,
Ryan

 

That is a very umm... 'traditional' method for achieving a drop down menu. I would suggest you re-do the entire thing. Check out the links below;

http://sperling.com/examples/menuh/
http://pixelspread.com/blog/289/css-drop-down-menu
And my personal fave;
http://www.cssplay.co.uk/menus/final_drop.html

 

I didn't write this code for the drop down menu myself, it's in a template that I'm using. Thanks for the links.. I'lll see what I can do with them.. I'm not the greatest with web designing lol. But is there any way to create a new drop down menu out of what code I already have? Could I somehow change a few things to get it to create another instance of the drop down, or not?

Thanks.

 

Hehe I wouldnt do it like that, as said look at CSS for it or something.

 

Lol I know it's a horrible way to do it, but I NEED this to be done already lol because I've been wasting weeks on trying to do this, but I can't seem to do it

What do you mean "look at CSS for it or something"?

 

Well i mean look for a CSS drop down menu instead. Check his links.