创建一个JQuery菜单弹出窗口

Question

有人能告诉我如何使用下面的图像创建此菜单弹出窗口的最佳方法吗？

下一张图片显示了将鼠标悬停在更多链接上时的外观。 我将弹出菜单作为图像。

<script type="text/javascript">  
    $(function() {
        $(this).find('#more_ddown').hide();
    });

    $(function() {
        $('#v3NavHeaderLink3').hover(function(){                    
            $('#more_ddown').fadeIn('fast');                        
            }, function(){
                $('#more_ddown').hide();
            });
        });

</script>

    <nav id="NavHeader">
        <a href="#" title="" id="Link1">Link #1</a>
        <a href="#" title="" id="Link2">Link #2</a>
        <a href="#" title="" id="Link3">More</a>
        <img src="img/more.png" id="more_ddown" alt="alt" />    
    </nav>

Answer 1

HTML

<ul id="menu">
    ...
    <li id="moreButton">MORE</li>
</ul>

<div id="morePopup">
   <div id="heading"><img src="arrow.png"/></div>
    <ul>
       <li><a href="#">link 1</a>
       <li><a href="#">link 1</a>
       <li><a href="#">link 1</a>
   </ul>
</div>

CSS

#morePopup
{
  display:none;
  position:absolute;
  left:/*whatever you want*/
  top:/*whatever you want*/
  width:/*whatever you want*/
  height:/*whatever you want*/
}
#heading
{
  display:block;
  width:/*same as morePopup*/
  height:/*whatever you want*/
}

* / this is for rounded corners太长了，无法放在这里

JQUERY

$("#moreButton").bind('mouseover',function(){
              $('#morePopup').css('display','block');
});
$("#morePopup").bind('mouseout',function(){
        $(this).css('display','none');
});