html - move <div> to inside page -

question

i trying create loginform dropdown on mouseover. form drops top left side of miniloginform div causes drop off screen. how drop down top right side of 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; } 

you need float li element right (if want box , anchor on right). also, need set relative position on it.

li element:

float: right; position: relative; 

box element

right: 0 

check example see how solve problem: http://jsfiddle.net/bnxbc/