I lose drop-down menu in IE7 - SuckerTree Vertical Menu

[jeevans]

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

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

3) Describe problem: There are three items in the left-hand navigation that have drop-down menus - About Us, News & Media, and Membership. In IE 7, the drop-down menus properly appear when I mouseover the three mentioned links, and I can move my mouse over the frist item of the drop-down menu. For example, for the News & Media link, I can move my mouse over to Newsletters; however, if I move my mouse down to the second item, the drop-down menu completely disappears. It works fine in the latest version of Firefox. It doesn't work in IE6 either, but I don't have a good computer with IE6 on it. I have IE6 on an old computer using Windows 2000 Server, and I'm viewing it through Remote Desktop. I just place my mouse over the left-hand navigation in IE6, and things start jumping - perhaps it's the Remote connection or the operating system. How can I keep from losing the drop-down menus? Thank you.

[rangana]

Could you up your codes, or better a link to the page in question :)

[jeevans]

I apologize. I meant to do that. Here is the URL:
http://www.nichemktghouston.com/czechcenter/about/aboutus_DropDown.asp

The URL for the CSS is:
http://www.nichemktghouston.com/czechcenter/czechcenterDropDown.css

Thanks!
Joyce

[rangana]

Change your CSS from the Subnav comment upto the end of holy hack:


/* Subnav
----------------------------------------------------- */
.suckerdiv { /* was subnavbox - Sample did not have this*/
width: 178px;
padding: 0;
margin: 0;
background-image: url(images/bg_navsub.jpg);
background-repeat: no-repeat;
}
.suckerdiv ul{
margin: 0 0 20px 0;
padding: 30px 0 0 0;
list-style-type: none;
width: 178px;
}
.suckerdiv ul li{
position: relative;
font-size: 14px;
}

.suckerdiv ul li ul{
position: absolute;
left: 178px;
top: 0;
width: 179px;
display: none;
padding: 1px;
/* list-style-type: none; */
visibility: hidden;
}

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

.suckerdiv ul li a:visited{
color: #000000;
}

.suckerdiv ul li a:hover{
color: #F1DEA2;
font-weight: bold;
background-color: #39608F;
}

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


I made a lot of changes and is not even aware what those are. There might be some minor flaws (color), but I know it's easy to fix.

See if it helps :)