求助JQUERY写下啦菜单小三角

]这个是最近访客的一个小区块，然后那里不是有个小三角么，我想这样移动在小三角上面出现下啦菜单， 1.禁止浏览，2，允许浏览，3，等等等的，，。。就是QQ空间的日志不是也有个这个么，不过那个是点击出现下啦的。。就这个差不多了，腾讯的演示我试写过几次了，从交互性上讲，应该  鼠标移动到小三角 出现下啦菜单，鼠标 移动到 小三角和菜单（或者仅仅是下啦菜单）的区域，那么操作下啦菜单消失，下啦菜单要 悬空于这部分文本啦，如果 出现下啦菜单然后 下面的挤下去了不好吧，，，下面555我发我的两个半成品吧，，杯具，，，昨天写了一天都没写好，，不知道结构》~~~
第一个，一个半成品了，后来要实现    ，从交互性上讲，应该  鼠标移动到小三角 出现下啦菜单，鼠标 移动到 小三角和菜单（或者仅仅是下啦菜单）的区域，那么操作下啦菜单消失，  发现结构写错了，因为以前没写 中间的 三角，两列布局，改三列都不兼容了
[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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>灭绝师太的个人空间</title>
<script src="http://css.gs/textarea/jquery-1.4.2.min.js" type="text/javascript"></script>
<style>
/*全局链接*/
a:link{color:#333; text-decoration:none}
a:visited{color:#333; text-decoration:none}
a:hover{color:#f00; text-decoration:underline}
a:actived{color:#f00; text-decoration:underline}/*右边的小三角*/
#sanjiaokuang{width:90px; display:inline-block}
.Focus2{background:#000}
.Blur2{background:#FFFFFF}
#jinzhi a:hover{background:#E4EFF4; display:block; text-decoration:none; color:#333333}
</style>
</head>
<body>
<div id="wrap">
    <div id="content">
     
     <div id="side_right">
         
            
</script>
            <div class="right_box">
                 <h2>最近访客</h2>
                    <ul id="fangke">
                     <li><span class="r" id="tiandi">(2010/4/11)</span><a href="#">弗格森将开工到</a>
      <div id="sanjiaokuang">
                        <a  id="sanjiao"><img src="images/sanjiao.gif" /></a>
                        <ul id="jinzhi" style="float:right; position:absolute;
width:53px; background:#FFFFFF; border:1px solid #DAECF6"><li><a href="##">禁止浏览</a></li><li><a href="##">禁止浏览</a></li><li><a href="##">禁止浏览</a></li><li><a href="##">禁止浏览</a></li></ul>
      </div>
                        <div class="clear"></div>
                        
                        <script type="text/javascript">
      $(function(){
               $("#jinzhi").hide();
      
              $("#sanjiaokuang").mousemove(function(){
               $("#jinzhi").show();
        })
      $("#sanjiaokuang").mouseover(function(){
               $("#jinzhi").hide();
        })
      
      
        
      
      
          
     
  
    })
</script>
                        
                        </li>
                        <li><span class="r">(2010/4/11)</span><a href="#">弗格森将开工到</a></li>
                        
                        
                      <li><span class="r">(2010/4/11)</span><a href="#">弗格森将开工到</a></li>
                    </ul>
            </div><strong></strong>
     </div>
     
    </div>
   <div class="clear"></div> 
    
</div>
</body>
</html>
[/code]下面是我修正后的这种结构，但是不会写 JQUERY  出现下啦菜单，，，因为小三角是B标签，，，写了以后，就鼠标移动到标签上出现 下啦菜单，移动到三角外就消失了，，，，那么那用户不是被郁闷死，那小三角才那么一点，而且不能把鼠标移动到子菜单。
斑斑可以用现在这个CSS结构帮我写下JQUERY啦。。
[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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {
margin: 0; padding:0
}ul{ width:240px; overflow:hidden; zoom:1; border:1px solid #aaa; padding:10px; list-style:none}
li{ float:left; height:20px; line-height:20px; width:100%; position:relative}
b{ width:0; height:0; font-size:0; border-left:3px solid #fff;border-top:3px solid #000;border-right:3px solid #fff; position:absolute; top:7px; right:60px}
span{ float:left; width:150px}
em{ float:right; width:50px; font-style:normal}
-->
</style></head><body>
<ul>
<li><span><a href="#">文字啊文字</a><b></b></span><em>05-06</em></li>
<li><span><a href="#">文字啊文字文字啊文字</a><b></b></span><em>05-06</em></li>
<li><span><a href="#">文字啊文字</a><b></b></span><em>05-06</em></li>
<li><span><a href="#">文字啊文字文字啊文字</a><b></b></span><em>05-06</em></li>
</ul>
</body>
</html>
[/code]
努力学习呀！！！555