I am using it on Safari right now and it works great!

i've the same problem !

"if you move folder 2.1 ABOVE sub item 2.1 the gap appears between the 2 items, so when you try to select the bottom 1 you move over the gap + the menu closes."

Does anybody finds THE solution to remove this gap?

Thanks !

Not working to me. When i make my folder 1 and sub menu 1.1 its working fine. But when i make sub meenu 1.2 its not working i cant click on sub menu 1.2.

Works fine for me. Just use the hack by jchalos for the IE problem.

It does not work in Firefow just shows the menu in tabular form, no drop downs etc. any ideas?

It worked fine for me in FireFox. You could try the "Son of Suckerfish" CSS dropdown menu as its easier to manage.

Nice menu.

It's simple to use and stuff, but can be a bit tricky to use too though...

Great work you have done here at Dynamic Drive :)

There's a small problem with this code that happens when a sub-menu has more than 1 sub-menus. For example:

<div class="suckertreemenu">
<ul id="treemenu1">
<li>Item 1</li>
<li>Item 2</li>
<li>Folder 1
<ul class="level0">
<li>Sub Item 1.1</li>
<li>Sub Item 1.2
<ul class="level1">
<li>Sub Item 1.2.1</li>
<li>Sub Item 1.2.2</li>
<li>Sub Item 1.2.3</li>
<li>Sub Item 1.2.4</li>
</ul>
</li>
<li>Sub Item 1.3</li>
<ul class="level1">
<li>Sub Item 1.3.1</li>
<li>Sub Item 1.3.2</li>
<li>Sub Item 1.3.3</li>
<li>Sub Item 1.3.4</li>
</ul>
<li>Sub Item 1.4</li>
</ul>
</li>
<li>Item 3</li>
<li>Folder 2
<ul class="level0">
<li>Sub Item 2.1</li>
<li>Folder 2.1
<ul class="level1">
<li>Sub Item 2.1.1</li>
<li>Sub Item 2.1.2</li>
<li>Sub Item 2.1.3</li>
<li>Sub Item 2.1.4</li>
</ul>
</li>
</ul>
</a>
</li>
<li>Item 4</li>
</ul>
<br style="clear: left;" >
</div>



It won't display the following sub-menus correctly. To fix this, use this javascript:



var menuids=["treemenu1"]; //Enter id(s) of SuckerTree UL menus, separated by commas

function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul");
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px"; //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon";
}
else{ //else if this is a sub level menu (ul)
var niveauMenu = ultags[t].className;
var positionAUtiliser = 0;
// We gotta check not only the previous ul, but the previous UL that's a level under it;
for (var z=t-1; z >= 0; z--)
{
if (ultags[z].className < niveauMenu)
{
positionAUtiliser = z;
break;
}
}
ultags[t].style.left=ultags[positionAUtiliser].getElementsByTagName("a")[0].offsetWidth+"px"; //position menu to the right of menu item that activated it
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon";
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible";
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden";
}
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false);
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal);


This should correct the problem. Just don't forget to add the class="levelX" in all the sub-menu ULS!!

ye, the links all in html code not in javascirpt!
i like it!

i want this menu, but i cant put in the my page on top. not stop page head. help ?