Hi there,

I got some source code from css play for a flyout menu which I've been trying to modify but the modifications seems to disturb the flyout part. It's kinda long but I've put comments in red to show where I think the problem area is. The CSS is posted first and the HTML after.


CSS
Code:
#flymenu {position:relative; z-index:500; margin-left:10px;background-image:url(newslist8.png);height:610px;width:200px;}
#flymenu ul {padding:0; margin:0; list-style:none;}



#flymenu ul ul {position:absolute; left:-9999px;}
#flymenu table {border-collapse:collapse; width:0; height:0; position:absolute; left:-1px; top:-1px;}

* html #flymenu ul li {float:left;}

/*begin mutilation of code here;I wanted these a's to have independent positioning, but it seems to have caused the flyout a's to stop working properly.*/
#flymenu ul li.pro a  {display:block;position:absolute;top:10px;left:40px; width:120px; height:30px; margin-top:0px; padding:8px 10px 8px 5px; font:normal 11px verdana, sans-serif; text-decoration:none; border:1px solid #888; border-color:#ddd #555 #555 #ddd; clear:left;}

#flymenu ul li.kenyastuff a  {display:block;position:absolute;top:120px;left:40px; width:95px; height:50px; margin-top:0px; padding:8px 10px 8px 5px; font:normal 11px verdana, sans-serif; text-decoration:none; border:1px solid #888; border-color:#ddd #555 #555 #ddd; clear:left;}

#flymenu ul li.newsstat a  {display:block;position:absolute;top:240px;left:40px; width:95px; height:50px; margin-top:0px; padding:8px 10px 8px 5px; font:normal 11px verdana, sans-serif; text-decoration:none; border:1px solid #888; border-color:#ddd #555 #555 #ddd; clear:left;}

#flymenu ul li.arty a  {display:block;position:absolute;top:320px;left:40px; width:95px; height:50px; margin-top:0px; padding:8px 10px 8px 5px; font:normal 11px verdana, sans-serif; text-decoration:none; border:1px solid #888; border-color:#ddd #555 #555 #ddd; clear:left;}

#flymenu ul li.certy a  {display:block;position:absolute;top:420px;left:40px; width:95px; height:50px; margin-top:0px; padding:8px 10px 8px 5px; font:normal 11px verdana, sans-serif; text-decoration:none; border:1px solid #888; border-color:#ddd #555 #555 #ddd; clear:left;}

/*I think this is where the flyout anchors should come in but only ONE box appears for some reason.  I tried lots of combinations, some of which produce the listed style, but for only one box.*/

#flymenu ul li ul a{height:20px;background-color:white;}
 
#flymenu ul li:hover {position:relative;}
#flymenu ul li a:hover {direction:ltr; color:lime; border-color:#89a; position:relative;}
#flymenu ul li:hover > a { color:lime; border-color:lime;}

#flymenu ul :hover ul,
#flymenu ul :hover ul :hover ul,
#flymenu ul :hover ul :hover ul :hover ul,
#flymenu ul :hover ul :hover ul :hover ul :hover ul {left:75px; top:-25px;}



#flymenu ul :hover ul ul,
#flymenu ul :hover ul :hover ul ul,  
#flymenu ul :hover ul :hover ul :hover ul ul  {left:-9999px;}

#flymenu span{
	position:absolute;left:-5000px;
	}

HTML

Code:
<div id="flymenu">

	<ul>
		<li class="pro"><a href="#url"><span>Program Updates</span></a></li>
		
		
		<li class="kenyastuff"><a href="#url"><span>Kenya stuff</span><!--[if gte IE 7]><!--></a><!--<![endif]-->

		<!--[if lte IE 6]><table><tr><td><![endif]-->
			<ul>
				<li><a href="#url">Corruption<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
					<ul>
						<li><a href="#url">Police</a></li>

						<li><a href="#url">Theives</a></li>
						<li><a href="#url">Fake notes</a></li>
					</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
				</li>

				<li><a href="#url">Common phrases<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
				     <ul>
					    <li><a class="hand" href="#url">Hello and Goodbye</a></li>
				        <li><a href="#url">Other words & phrases</a></li>
				
					</ul>
				</li>
				<li><a href="#url">Travel<!--[if gte IE 7]><!--></a><!--<![endif]-->
				<!--[if lte IE 6]><table><tr><td><![endif]-->
				    <ul>
					    <li><a href="#url">Routes and places</a></li>
					</ul>
		        </li>
				
				<li><a href="#url">Safety</a></li>
	     </ul>
			
	    </li>	
				
				<li class="newsstat"><a href="#url"><span>Statistics</span></a></li>
					
				<li class="arty"><a href="#url"><span>Articles</span></a></li>

			     <li class="certy"><a href="#url"><span>Certificate</span></a></li>
						

	</ul>
</div>