mootools 滑动制定区域出现右键选择框

-->

• item 1
• item 2
• item 3
• item 4

<style>
#block1 {
    BACKGROUND-COLOR: #ccc; WIDTH: 100px; HEIGHT: 100px
}
.over#block1 {
    BACKGROUND-COLOR: #999
}
#block2 {
    POSITION: absolute; DISPLAY: none; BACKGROUND: #999; TOP: 0px; LEFT: 102px;font-size:12px;
    margin:0px;padding:0px;border:0px
}
#block2 LI {
    LIST-STYLE-TYPE: none; MARGIN: 4px;
    margin:4px;padding:0px;border:0px;
    list-style:disc none outside;
    
}
#block2 A {
    PADDING-BOTTOM: 4px; PADDING-LEFT: 4px; PADDING-RIGHT: 4px;
     DISPLAY: block; BACKGROUND: #000; COLOR: #fff; PADDING-TOP: 4px;
     font:12px verdana,Helvetica ;font-size:90%;font-weight:700;
     
}
#block2 A:hover {
    BACKGROUND: #fff; COLOR: #000
}
</style>
<script src="http://www.clientcide.com/scripts/clientside.moo.v1.2.packed.js"></script> -->

<DIV style="POSITION: relative"><DIV id=block1></DIV>
<UL style="DISPLAY: none" id=block2>
<LI><A href="javascript:void(0)">item 1</A> 
<LI><A href="javascript:void(0)">item 2</A> 
<LI><A href="javascript:void(0)">item 3</A> 
<LI><A href="javascript:void(0)">item 4</A> </LI></UL></DIV>
<script defer=defer>

new HoverGroup({
    elements: [$('block1'), $('block2')],
    onEnter: function(){
        $('block1').addClass('over');
        $('block2').show();
    },
    onLeave: function(){
        $('block1').removeClass('over');
        $('block2').hide();
    }
})


</script>