position absolute div and toggle outside div

<div id="menu">
    HERE
</div>

<div id="menu2">
    <开发者_开发知识库span id="one" class="menu2">1. one </span>
    <span id="two" class="menu2">2. two </span>
</div>

#menu {
background-color: red;
width: 100px;
height: 100px
}
#menu2 {
    display: none;
    background-color: green;
    position: absolute;
}


$('#menu').live('click', function(e) {
    $('#menu2').toggle();
});

$('.menu2').live('click', function(e) {
    $('#menu').html($(this).attr('id'));
});

how can i set .menu2 there where i clicked? and how can i hide #menu2 if i click outside #menu ? also if i clicked .menu2

live example: http://jsfiddle.net/FhVgp/

jsFiddle demo

$('#menu').bind('click', function(e) {
    e.stopPropagation();
    var posX = e.pageX;
    var posY = e.pageY;

    $('#menu2').toggle().css({left: posX, top: posY });
});

$('.menu2').live('click', function(e) {
    $('#menu').html($(this).attr('id'));
});

$(document).bind('click', function() {
    if ($('#menu2').is(':visible')) {
        $("#menu2").hide();
    }
});