Sucker tree issue

[gavy]

Hi Gus, I am using Suckertree vertical style menu. I am using Dyanmic Code in my <ul> and <li> to generate the categories dynamically.

When i move my mouse over the menu to load its submenu, it only works in IE 6 and no other browser, either it FF, opera, safari, chrome, IE 7 or IE 8

i do not know what i am doing wrong.

Here is my Css File:



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

.suckerdiv ul li{
position: relative;
}

/*Sub level menu items */
.suckerdiv ul li ul { position: absolute; width: 160px; padding-top:1px; display: none; }

/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
width:100%; /* To check IE7 Width */
color: white;
text-decoration: none;
background: #001b2f;
padding: 1px 5px;
border: 0px solid #ccc;
border-bottom: 0;
}

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

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

.suckerdiv .subfolderstyle{
background: url(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 */


it works in IE 6 but not properly as when i move my mouse the category, it show the sub menu but when i move my mouse to submenu, it just vanishes.

I have code like following to call the menus.


<div class="suckerdiv">
<ul id="suckertree1">
<cfoutput query="stuff">
<cfset curCatID = stuff.catID>
<li><a href="index.cfm?action=city&category=#URLEncodedFormat(stuff.catID)#">#stuff.catName#</a>
<ul>
<cfloop query="getvalues">
<cfif getvalues.parentid eq curCatID><li><a href="##">#getvalues.catname#</a></li></cfif>
</cfloop>
</ul>
</li>
</cfoutput>
</ul>
</div>

Please Guide Me where i am Wrong

[bluewalrus]

I don't know cold fusion and don't know if you are or arent doing it correctly could you put the html that is outputted? I think it should look like this.


<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="index.cfm?action=city&category=#URLEncodedFormat(stuff.catID)#">cat 1</a>
<ul>
<li><a href="index.cfm?action=city&category=#URLEncodedFormat(stuff.catID)#">sub 1 of cat 1</a></li>
<li><a href="index.cfm?action=city&category=#URLEncodedFormat(stuff.catID)#">sub 2 of cat 1</a></li>
<li><a href="index.cfm?action=city&category=#URLEncodedFormat(stuff.catID)#">sub 3 of cat 1</a></li>
</ul>
</li>
<li><a href="index.cfm?action=city&category=#URLEncodedFormat(stuff.catID)#">cat 2</a>
<ul>
<li><a href="index.cfm?action=city&category=#URLEncodedFormat(stuff.catID)#">sub 1 of cat 2</a></li>
<li><a href="index.cfm?action=city&category=#URLEncodedFormat(stuff.catID)#">sub 2 of cat 2</a></li>
<li><a href="index.cfm?action=city&category=#URLEncodedFormat(stuff.catID)#">sub 3 of cat 2</a></li>
</ul>
</li>
</ul>
</div>

[gavy]

Look at This address and then see the Dom Source to see what happening Please

http://www.ibestcity.com

Regards