title: move <div> to inside page
body: <h2>Question</h2>
  
  <p>I am trying to create a loginForm dropdown on mouseover.  The form drops from the top left side of the miniLoginForm div which causes it to drop off the screen.  How do I get it to drop down from the top right side of the miniLoginForm div?</p>
  
  <p><img src="https://i.stack.imgur.com/PJTsn.png" alt=""></p>
  
  <h2>HTML</h2>
  
  <pre><code>    &lt;li id="login"&gt;&lt;?=anchor('users/login', 'Login')?&gt;
          &lt;div id="miniLoginForm"&gt;
              &lt;?=form_open('users/login')?&gt;
              &lt;p&gt;Username: &lt;?=form_input('username')?&gt;&lt;/p&gt;
              &lt;p&gt;Password: &lt;?=form_password('password')?&gt;&lt;/p&gt;
              &lt;p&gt;&lt;?=form_submit('Login', 'Login')?&gt;&lt;/p&gt;
              &lt;?=form_close()?&gt;
              &lt;p&gt;New User? &lt;?=anchor('users/register', 'Click here')?&gt;&lt;/p&gt;
          &lt;/div&gt;            
      &lt;/li&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>#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;
  }
  </code></pre>