title: Make a drop down login form on the Zurb Foundation Framework
body: <p>Ok, well you see I have been able to successfully create a dropdown login form in Twitter Bootstrap. In Bootstrap it was much simpler, but this framework doesn't work that easily. This is what I am trying to achieve: <a href="https://lh4.googleusercontent.com/-A1GH5oiWNEI/UTg6JoR9kDI/AAAAAAAAAAM/g4BJNVkvLJ4/s1600/Drop-Down-Form-F3.png" rel="nofollow">https://lh4.googleusercontent.com/-A1GH5oiWNEI/UTg6JoR9kDI/AAAAAAAAAAM/g4BJNVkvLJ4/s1600/Drop-Down-Form-F3.png</a>. Here is my current code: (I cut some parts out)</p>
  
  <pre><code>    &lt;nav class="top-bar"&gt;
    &lt;ul class="title-area"&gt;
      &lt;!-- Title Area --&gt;
      &lt;li class="name"&gt;
        &lt;h1&gt;&lt;a href="#"&gt;ChatAar&lt;/a&gt;&lt;/h1&gt;
      &lt;/li&gt;
      &lt;!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone --&gt;
      &lt;li class="toggle-topbar menu-icon"&gt;&lt;a href="#"&gt;&lt;span&gt;Menu&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;section class="top-bar-section"&gt;
      &lt;!-- Right Nav Section --&gt;
      &lt;ul class="right"&gt;
      &lt;a href="#" class="alert button" data-dropdown="hover1" data-options="is_hover:false"&gt;Login&lt;/a&gt;
      &lt;ul id="hover1" class="f-dropdown" data-dropdown-content&gt;
      &lt;!-- Login form here --&gt;
          &lt;form method="post" action="&lt;?php echo $_SERVER['PHP_SELF']; ?&gt;" &gt;
              &lt;div class="red"&gt;&lt;?php echo $Login; ?&gt;&lt;/div&gt;
                  &lt;p&gt;Username:&lt;/p&gt;
                  &lt;input name="user" type="text" class="field" id="user"/&gt; 
                  &lt;p&gt;Password:&lt;/p&gt;
                  &lt;input name="pass" type="password" class="field" id="pass" value="" /&gt;
                      &lt;br /&gt;
                  &lt;label style="text-color:white;"&gt;Remember Me For 30 Day's&lt;/lable&gt;
                  &lt;input name="remember" type="checkbox" value="true" /&gt;
                  &lt;input name="page" type="hidden" value="&lt;? echo $_GET['page']; ?&gt;" /&gt;
                  &lt;input name="submit" type="submit" class="button" value="Log In" /&gt;
                      &lt;br /&gt;
                  &lt;a href="forgotpassword.php"&gt;Password Recovery&lt;/a&gt; | &lt;a href="register.php"&gt;Sign Up&lt;/a&gt;
               &lt;/div&gt;
          &lt;/form&gt;
      &lt;/ul&gt;
      &lt;/ul&gt;
    &lt;/section&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>And this is what I get:
  <a href="http://webymaster.hj.cx/public.php?service=files&amp;t=cdf517da96a2ad178045198169958afb" rel="nofollow">http://webymaster.hj.cx/public.php?service=files&amp;t=cdf517da96a2ad178045198169958afb</a>. I have tried normal drop downs but it doesn't work (sorry dont have a pic) then I came up with this but, its not the best. Please Help Thank You!</p>