Reposition html bullet script? Unusual problem

[TimNiceButDim]

Hi,
I am trying to build a new tree style menu for my website. You can see the current one here - www.hostcompanies.com . Although this works fine, it is a heavy bit of code and it slows down the page a lot on a slow connection.

There are lots of tree menus available on the web, however i cannot find one that will enable search engines to crawl the links in the menu and in a frameless enviroment.

I did find a script over at dynamic drive, that is quick.. does the job and is crawlable. Problem is that the bullet items appear too far over to the right. How could i alter the script to position the menu better?

The script is half javascipt and half html. It uses the bullet list command to display the menu items. So in actual fact.. if i could reposition the bullet items somehow... i could get this script to do what i want.

You can see the script here - www.hostcompanies.com/menutest2.htm .

Can this script be changed to do what i want?

Perhaps i should just see if anyone can make me a lightweight script that is similar - sitepoint itself uses a script on the forum homepage which would do what i want.

[FauxPas]

To move the submenus to the left, add a margin-left attribute to the foldinglist style:

#foldinglist{list-style-image:url(iNavigate/graphics/leaf.gif);
margin-left:16px;}

[TimNiceButDim]

Which bit of code do i need to change that into?

[TimNiceButDim]

To move the submenus to the left, add a margin-left attribute to the foldinglist style:

#foldinglist{list-style-image:url(iNavigate/graphics/leaf.gif);
margin-left:16px;}

I see... i have done this. Its good, but i also need to move the menu headings over to the left... do you know how this could be done?

And is it possible to adjust the positioning of the height of the bullets? If i could also position the height and move the menu headings over to the left - i could make the exact look i need.

[FauxPas]

Try these styles:

#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ;
list-style-image:url(iNavigate/graphics/nodePlus.gif);
}

#foldinglist{list-style-image:url(iNavigate/graphics/leaf.gif);
margin-left:16px;
padding-left:0; /* fix for non-IE browsers */
}

#mainlist{
margin-left:16px; /* move whole list left */
line-height:16px; /* remove gap between items */
vertical-align:top; /* fix vertical alignment */
}

div>ul#mainlist {
padding-left:8px; /* fix for non-IE browsers */
}

Apply this new style to the main ul tag:

     <div align="left">
       <ul id="mainlist">
         <li id="foldheader">News</li>

[TimNiceButDim]

Thanks FauxPas.. it is working fine now except i have a problem with one area of code. Its a bit complicated so i posted it here http://www.sitepoint.com/forums/show...6&goto=newpost .

Paul made some comments about the html struture of the bullet list ( at the above link ). Do you think this script is a bit shabby?

Would you be able to create a hack to fix the problems?

Either way i appreciate your help and if you have a website i can give you a link on for free on one of my webpages - pr5.