創建一個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'); 
});