如何制作类似于 Dropbox 的登录按钮？

我正在尝试做类似 Dropbox 的登录按钮。 有一个线程jQuery 中的 dropbox 登录弹出方法？但我对此无能为力。 我希望当我按下登录按钮时将其打开，与 dropbox.com 相同

这是示例代码。现在它可以在悬停时运行。但我想要点击。我尝试集中注意力，但没有成功。

<div id="login">
    <a href="#">Login</a>
    <div>
        Login Form
        Lorem Ipsum blablbalbabababa lbablaabalbalba
    </div>
</div>

And

div#login {
    position: relative;
    float: right;
    height: 20px;
    padding: 5px;
}
div#login:focus {
    background: rgba(0,0,0,.2);
}
div#login div {
    position: absolute;
    top:30px;
    right:0;
    width: 200px;
    height: 100px;
    padding: 10px;
    background: rgba(0,0,0,.2);
    visibility: hidden;
}
div#login:focus div {
    visibility: visible;
}

这是这段代码的演示http://jsfiddle.net/sXmAe/

也许使用 Jquery 更容易，但我不知道如何。

简单地消除这条规则：

div#login:focus div {
    visibility: visible;
}

然后这段 jQuery 将使其在单击时可见：

$("#login a").click(function(){
    $("#login div").css("visibility","visible");
});

你可以在这里看到它的动作：http://jsfiddle.net/jPPew/2/

（我添加了一个边距，这样 JSFiddle“结果”横幅就不会妨碍点击。”）

编辑：如果您要求该行为在单击其他地方时也“关闭”登录区域，请尝试如下操作：http://jsfiddle.net/jPPew/6/

$("#login").click(function(e){
    $("#login div").css("visibility","visible");
    e.stopPropagation();
});

$("body").click(function(e){
    $("#login div").css("visibility","hidden");
});