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/cs...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/czec...s_DropDown.asp

The URL for the CSS is:
http://www.nichemktghouston.com/czec...erDropDown.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