...

View Full Version : flyout probs



daring_du
01-14-2010, 12:39 PM
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

#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


<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum