Vertical Flyout Menu Problems

I am trying to create a vertical flyout menu and I’m pulling from several different examples to make mine. Thing is, won’t work in IE, duh. So I tried using suckerfish to fix my hover issues but it still wont work.

Here’s the website with the test menu: [url]http://exco.org/testmenu.php[/url]

Here’s the suckerfish function I’m using: [url]http://www.htmldog.com/articles/suckerfish/[/url]

Here’s the css I’m using :

[code=php]
#menu {
height:150px;
font-size:90%;
margin:25px 0 50px 15px;
}

#menu ul {
position:relative;
z-index:500;
padding:0;
margin:0;
list-style-type:none;
width:150px;
}

#menu li {
background:#d4d8bd;
height:26px;
/* for IE7 */
float:left;
}

#menu li.sub {background:#d4d8bd url(sub.gif) no-repeat right center;}

#menu a, .menu a:visited {
display:block;
text-decoration:none;
height:25px;
line-height:25px;
width:149px;
color:#000;
text-indent:5px;
border:1px solid #fff;
border-width:0 1px 1px 1px;
}

#menu li:hover, #menu li.sfhover {position:relative;}

#menu a:active, #menu a:focus {color:#efa; background:#aa7;}

/* retain the hover colors for each sublevel IE7 and Firefox etc */
#menu li:hover > a{color:#efa; background:#aa7;}

/* hide the sub levels and give them a position absolute so that they take up no room */
#menu li ul {
visibility:hidden;
position:absolute;
top:-30px;
/* set up the overlap (minus the overrun) */
left:100px;
/* set up the overrun area */
padding:30px;
/* this is for IE to make it interpret the overrrun padding */
background:transparent url(transparent.gif);
}

#menu li:hover > ul, #menu li.sfhover > ul {
visibility:visible;
background-color: red;
}[/code]

Thanks for any help!

Also in #CSS _↴