DD Sucker Tree Vertical Menu Help Needed

[ktpub]

1) Script Title:
SuckerTree Vertical Menu (v1.1)

2) Script URL (on DD):
http://www.dynamicdrive.com/style/cs...menu-vertical/

3) Describe problem:
I am having trouble with the menu when I have htm pages not located in the root folder. The submenus are pages that I have in sub folders and when you go there, the arrow-list.gif graphic is not shown and most times the tree menu is not shown too.

Please see the test site below:

http://www.starsnstripessoccer.com/test/index.htm

These pages and their subpages seem to work because they are in the root directory.

Home, Philosophy, Staff, FAQs, Sitemap, Contact, Camps

The Itineraries and Past Trips tree menus seem to work except when taken to the submenu page, the arrow-list.gif file is gone and the submenu items don't show up anymore.

Please point me in the right direction. I can put all of the files in the root directory and they seem to work but that clutters up the root folder with tons of htm files.

I am using IE6.

[ktpub]

Here is the code for the problem above. It is in a Libray file in Dreamweaver that is called by all of the htm files.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 210px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

.suckerdiv ul li{
position: relative;
}

/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 160px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

.suckerdiv ul li a:visited{
color: black;
}

.suckerdiv ul li a:hover{
background-color: #d2f0ff;
}

.suckerdiv .subfolderstyle{
background: url(../graphics/arrow-list.gif) no-repeat center right;
}


/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">

//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

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

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

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

</script>

<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="../index.htm">Home</a></li>
<li><a href="../philosophy.htm">Philosophy</a></li>
<li><a href="../staff.htm">Staff</a></li>
<li><a href="#">Itineraries</a>
<ul>
<li><a href="../tours/2007/europe.htm">2007 Europe</a></li>
<li><a href="../tours/2007/australia.htm">2007 Australia<br></a></li>
<li><a href="../tours/2007/supporters.htm">2007 Supporters<br></a></li>
</ul>
</li>
<li><a href="../tours/docs.htm">Players Packets/Documents</a></li>
<li><a href="#">Past Trips</a>
<ul>
<li><a href="../tours/achievements.htm">Achievements</a></li>
<li><a href="../tours/2006/worldcup_journal.htm">2006 World Cup</a></li>
<li><a href="../tours/2006/classic_journal.htm">2006 Classic</a></li>
<li><a href="../tours/2005/journal.htm">2005</a></li>
<li><a href="../tours/2004/journal.htm">2004</a></li>
<li><a href="../tours/2003/journal.htm">2003</a></li>
<li><a href="../tours/2002/journal.htm">2002</a></li>
<li><a href="../tours/2001/journal.htm">2001</a></li>
<li><a href="../tours/2000/journal.htm">2000</a></li>
</ul>
</li>
<li><a href="../tours/pastplayers.htm">Past Players</a></li>
<li><a href="../tours/testimonials.htm">Testimonials</a></li>
<li><a href="../faqs.htm">FAQs</a></li>
<li><a href="#">Online Payments</a>
<ul>
<li><a href="http://www.active.com/framed/event_detail.cfm?event_id=1318530&amp;customreg=blank">2007 Soccer Camps</a></li>
<li><a href="http://www.active.com/framed/event_detail.cfm?event_id=1334011&amp;customreg=blank&quot">2007 Australia Trip<br></a></li>
<li><a href="http://www.active.com/framed/event_detail.cfm?event_id=1334011&amp;customreg=blank&quot">2007 Europe Trip<br></a></li>
</ul>
</li>
<li><a href="../catalog.htm">Catalog</a></li>
<li><a href="../camps.htm">Camps</a></li>
<li><a href="../contact.htm">Contact Us</a></li>
</ul>
</div>

[ddadmin]

The submenus should not be affected by file paths, since the CSS itself on each page on your page is directly added (ie: not via a .css file). However, for the image, the easiest way is just to modify the CSS for it from:

background: url(../graphics/arrow-list.gif) no-repeat center right;

to an absolute reference, for example:

background: url(http://www.starsnstripessoccer.com/graphics/arrow-list.gif) no-repeat center right;

[ktpub]

Thanks for that info. I have changed that graphic to an absolute path in the 3 template files so that should not be an issue anymore, but it still does not show up on the submenu pages once you go to those submenu pages. This is very hard to explain. I will try another way.

Go to the Index page and the menu works great. Click on the Itineraries/2007 Europe submenu and go to that page. Then the arrow-list.gif graphic goes away and you can not see or use any of the submenus anymore.

PLEASE LOOK AT THESE TWO PAGES FOR MY EXAMPLE ABOVE.

Index Page:
http://www.starsnstripessoccer.com/test/index.htm

Itineraries 2007 Europe Page:
http://www.starsnstripessoccer.com/t...007/europe.htm

Any other thoughts would be very very much appreciated. Thanks for your time.