Suckerfish flyout not working

[jgsketch]

I'm using the suckerfish example for my CSS vertical menu with just one flyout level. I thought it was straight foward but the flyout does not even show up. I've gone through other posts and tried various code snipets to get it to work, but no luck.

Here is my CSS code

/*----Body Left Panel Menu----*/
#leftPan{width:114px; float:left;}
#leftPan h2{width:114px; height:34px; background:#fff; color:#5F7A77; font-size:18px; line-height:34px;}
#leftPan ul{width:114px;}
#leftPan ul li{width:114px; height:24px;}
#leftPan ul li a{width:102px; height:24px; display:block; background:url(images/bullet2-normal.gif) 0 10px no-repeat #fff; color:#5F7A77; text-decoration:none; line-height:24px; padding:0 0 0 12px;}
#leftPan ul li a:hover{background:url(images/bullet2-hover.gif) 0 10px no-repeat #fff; color:#5F7A77; text-decoration:none;}
#leftPan ul li span{text-decoration:underline;}
/* second-level lists */
#leftPan li ul{position:absolute; left:-999em; margin-left:11.05em; margin-top:-1.35em; z-index:1;}
#leftpan li:hover ul, #leftpan li li:hover ul, #leftpan li li li:hover ul, #leftpan li.sfhover ul, #leftpan li li.sfhover ul, #leftpan li li li.sfhover ul {/* lists nested under hovered list items */left:auto;} 

Now here is the webpage section

<div id="leftPan">
<ul>
   <li><a href="#" target="_blank">Menu Test</a>
    <ul>
     <li><a href="#" target="_blank">Test Flyout</a></li>
    </ul>
   </li>
   <li><a href="#" target="_blank">Menu Test</a></li>
</ul> 

I'm using the same javascript as suckerfish just substituting the id NAV for leftpan. I'm not sure what to troubleshoot next?

[jgsketch]

I figured it out. I needed to put the id in the UL tag as well, not just the DIV tag. Now I just need to work on the positioning, the flyout sits way out on the right, far away from the menu. But I think I know how to fix that.

[Paul O'B]

I figured it out. I needed to put the id in the UL tag as well, not just the DIV tag.

You can't use the same ID twice if that's what you were saying.

In your code above you have mixed the case of the part that will display the menu.

#leftpan li:hover ul,etc....

It should be:

#leftPan li:hover ul,

classes and ID's are case sensitive.

Its appearing to the right because you have applied a margin-left of 11.05em which could be reduced to match what is required.

[jgsketch]

Thanks. I did not notcie the case issue. Something so simple too. That is why I was having problems before.