html - 移动到内页

Question

问题

我正在尝试在鼠标悬停时创建一个 loginForm 下拉菜单。表单从 miniLoginForm div 的左上角掉下，导致它从屏幕上掉下来。如何让它从 miniLoginForm div 的右上角下拉？

HTML

    <li id="login"><?=anchor('users/login', 'Login')?>
        <div id="miniLoginForm">
            <?=form_open('users/login')?>
            <p>Username: <?=form_input('username')?></p>
            <p>Password: <?=form_password('password')?></p>
            <p><?=form_submit('Login', 'Login')?></p>
            <?=form_close()?>
            <p>New User? <?=anchor('users/register', 'Click here')?></p>
        </div>            
    </li>

CSS

#miniLoginForm {
    margin: auto auto;
    display: block;
    border: 1px solid black;
    width: 250px;
    position: absolute;
}

nav {
    width: 99%;
    margin: 0 auto;
    overflow:hidden;
    text-align: center;
    padding: 4px;
    border: 2px solid black;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline-block;
    margin: 0 6px 0 3px;
}

Answer 1

您需要将您的 li 元素浮动到右侧（如果您想要右侧的框和锚点）。此外，您需要在其上设置相对位置。

li 元素：

float: right;
position: relative;

盒子元素

right: 0

检查此示例以了解如何解决您的问题：http: //jsfiddle.net/bnXbC/

Answer 2

如果我理解得很好，您想从具有登录类的 li 的右上角删除登录表单。尝试关注

.login { 位置：相对；width : 你的宽度 px; }

miniLoginForm { 位置：绝对；对：0；}