Hi all,

I am trying to put together a situation where a person rolls over a button and a hidden div appears, which in fairness is working, and then if I roll out of that hidden fiv it goes away, but the code blow as you will see if you follow the link, isnt working correctly.

When I rollver 'Europe' yes the hidden div appears, but it goes away when I rollover one of the links in the div that appears.

http://devchecksafetyfirst.csf.dcman....php?Country=5

here is my code:

Code:
#country_Nav{
position:relative; width:962px; height:32px; margin-top:3px; margin-bottom:3px; margin-left:auto; margin-right:auto;	
}
#top_Level_Nav1_Div{
position:relative; width:158px; float:left;	background-color:#f5a323; height:32px; text-align:center;
}
#top_Level_Nav1_Div a:link{
position:relative; color:#fff; height:32px; line-height:32px; text-align:center; text-decoration:none;
}
#top_Level_Nav1_Div a:visited{
position:relative; color:#fff; height:32px; line-height:32px; text-align:center; text-decoration:none;
}
#top_Level_Nav1_Div a:hover{
position:relative; color:#333; height:32px; line-height:32px; text-align:center; text-decoration:underline;
}
#top_Level_Nav1_Hidden{
position:relative; height:80px; width:962px; margin-left:auto; margin-right:auto; background-color:#f5a323; margin-top:-3px; clear:both; margin-bottom:6px;	
}


<div id="country_Nav">

<div id="top_Level_Nav1_Div">
<a href="#" class="top_Level_Nav1" onmouseover="document.getElementById('top_Level_Nav1_Hidden').style.display = 'block';">EUROPE</a>
</div>
</div>

<div id="top_Level_Nav1_Hidden" style="display:none;" onmouseout="document.getElementById('top_Level_Nav1_Hidden').style.display = 'none';">
<? $d=mysql_query("select * from tbl_countries WHERE (Reg_Cntry='1') order by Nom_Cntry ASC");  
while($f=mysql_fetch_assoc($d)){ ?> 
<a href="result.php?Country=<?=$f['Id_Cntry']?>"><?=$f['Nom_Cntry']?></a>&nbsp;<span style="color:#333">|</span>&nbsp;
<? } ?>
</div>