Make a drop down login form on the Zurb Foundation Framework

Question

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: https://lh4.googleusercontent.com/-A1GH5oiWNEI/UTg6JoR9kDI/AAAAAAAAAAM/g4BJNVkvLJ4/s1600/Drop-Down-Form-F3.png. Here is my current code: (I cut some parts out)

    <nav class="top-bar">
  <ul class="title-area">
    <!-- Title Area -->
    <li class="name">
      <h1><a href="#">ChatAar</a></h1>
    </li>
    <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
    <a href="#" class="alert button" data-dropdown="hover1" data-options="is_hover:false">Login</a>
    <ul id="hover1" class="f-dropdown" data-dropdown-content>
    <!-- Login form here -->
        <form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" >
            <div class="red"><?php echo $Login; ?></div>
                <p>Username:</p>
                <input name="user" type="text" class="field" id="user"/> 
                <p>Password:</p>
                <input name="pass" type="password" class="field" id="pass" value="" />
                    <br />
                <label style="text-color:white;">Remember Me For 30 Day's</lable>
                <input name="remember" type="checkbox" value="true" />
                <input name="page" type="hidden" value="<? echo $_GET['page']; ?>" />
                <input name="submit" type="submit" class="button" value="Log In" />
                    <br />
                <a href="forgotpassword.php">Password Recovery</a> | <a href="register.php">Sign Up</a>
             </div>
        </form>
    </ul>
    </ul>
  </section>
</nav>

And this is what I get: http://webymaster.hj.cx/public.php?service=files&t=cdf517da96a2ad178045198169958afb. 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!

Answer 1

Using Foundation 5, this will get you close:

<nav class="top-bar" data-topbar>
  <section class="top-bar-section">
    <ul class="right">
      <li><a href="#" data-dropdown="signin">Sign In</a></li>
    </ul>
  </section>
</nav>
<div id="signin" class="f-dropdown small content" data-dropdown-content>
  <!-- signin form here -->
</div>

Note that the login form needs to be located outside of the top-bar, otherwise it will have badly mangled styles.

For a complete reference, examples, and ideas of how to customize it, check out Zurb's wonderful documentation on dropdowns and forms.