将<div>移动到内页</div>

Question

问题

我正在尝试在mouseover上创建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

如果我理解得很好，你想从具有loggin类的li的右上角删除登录表单。试试以下

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

miniLoginForm { 位置：绝对; 右：0; }