求一个JS二级导航

 <script language="javascript">
     function moveon(id) {

         bolck = document.getElementById(id).style;
         bolck.visibility = "visible";

     }
     function moveout(id) {
         bolck = document.getElementById(id).style;
         bolck.visibility = "hidden";

     }
        </script>

<ul class="sec_nav"><li>
<a href="###" onmousemove="moveon('sx')" onmouseout="moveout('sx')">AAA</a></li>
</ul>
<div id="sx" class="threeblock">
 
</ul></div>

求解决 鼠标放到 a标签上就显示 离开a就消失了
我想要个效果是 放到a标签上显示 离开 div sx 消失 求助~~~
[解决办法]
用js改动也很大的，要增加事件

<ul class="sec_nav"><li>
<a href="###" onmousemove="moveon('sx')" onmouseout="moveout('sx')">AAA</a></li>
</ul>
<div id="sx" class="threeblock" style="border:solid 1px black" onmouseover="moveon(this.id)" onmouseout="moveout(this.id,true)">
 sx</div>
 <script language="javascript">
     var timers = {}
     function moveon(id) {
         clearTimeout(timers[id]);
         bolck = document.getElementById(id).style;
         bolck.visibility = "visible";

     }
     function moveout(id, im) {
         if (im) {
             bolck = document.getElementById(id).style; 
 
             bolck.visibility = "hidden";
         }
         else
             timers[id] = setTimeout(function () { moveout(id, true) }, 300); //需要计时器，间隔大小需要自己依据弹出层的位置来调整，距离远就设置大些
     }
</script>