1

对于那些从未访问过 dropbox 的人，这里是链接https://www.dropbox.com/

请参阅“登录”的下拉菜单链接。我如何创建这样的下拉链接？

在此处输入图像描述

4

1 回答 1

0

这是小提琴。只是一些Jquery。

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

CSS：

div#login {
    position: relative;
    float: right;
    height: 20px;
    padding: 5px;
    margin-right:100px;
}
div#login:hover {
    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;
}
body{height:1000px;}

查询：

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

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

http://jsfiddle.net/jPPew/6/

于 2013-04-25T18:54:13.993 回答