做一个切换城市效果，功能是鼠标移上去时显示分站列表，移开时隐藏列表
用了两种方案去做：
一种是Js+Div+Css 效果：http://www.jiushu8.com/rrr
一种是纯Div+Css 效果：http://www.jiushu8.com/rrr1
现在是两种效果都存在一个问题，鼠标移上去时显示列表后一下就隐藏了，这样的话就没办法去点击里面的分站链接了。
我知道问题的原因在哪里，只想求个好点的解决方案， 谢谢！
------解决方案--------------------------------------------------------
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head><title>城市切换</title><meta http-equiv="Content-Type" content="texthtml; charset=gb2312" /><style type="text/css">body{font-size:12px;}#site_box{ position:absolute; width:300px; z-index:99; background-color: #FFFFFF; border: 1px solid #000000;}#area_box .s1,#area_box .s2,#area_box .s3,#area_box #info{position:relative;left:-1px;top:-1px;}#area_box .s1 {background:#f1f0f1;}#area_box .s2 {background:#dbdadb;}#area_box .s3 { background-color: #FFFFFF;}#area_box #info {border:1px solid #0066CC;padding:10px;}#area_box ul{margin:0px;padding:0px;line-height:20px;}#area_box ul li{list-style:none;display:inline;margin:0 6px;}#area_box .join{text-align:right;margin-top:10px;}.show{left:10px;top:51px;}.hide{left:-3000px;top:51px;}.sitea { display: block; line-height: 33px; height: 33px; width: 122px; text-align: center; background-color: #0099FF; color: #FFFFFF;}</style><script language="javascript">function show(){ document.getElementById('site_box').className=''; }function hide(){document.getElementById('site_box').className='hide';}</script></head><body><a href="#" onmouseover="show()"onmouseout="hide()" class="sitea">切换城市</a><div id="site_box" onmouseover="show()"onmouseout="hide()" class="hide"> <div id="area_box"> <div class="s1"> <div class="s2"> <div class="s3"> <div id="info"> <img src="wait.gif" /> 加载中，请稍候... <ul> <li><a href="">总 站</a></li> <li><a href="">东莞站</a></li> <li><a href="">深圳站</a></li> <li><a href="">北京站</a></li> <li><a href="">天津站</a></li> <li><a href="">东莞站</a></li> <li><a href="">深圳站</a></li> <li><a href="">北京站</a></li> <li><a href="">天津站</a></li> <li><a href="">东莞站</a></li> <li><a href="">深圳站</a></li> <li><a href="">北京站</a></li> <li><a href="">天津站</a></li> </ul> <div class="join">[ <a href="">加盟我们..</a> ]</div> </div> </div> </div> </div> </div></div>sdfsdfsdfs</body></html>