Menu icon Foundation
Drop-down button and search bar

I am trying to get this drop down button and search bar to work but i can seem to get it right? Anyone know how to do this?

Thanks

<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">Procrasintation Masters</a></h1>
    </li>
    
  <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
    <li class="right">
  <div class="toot-bar-section">
    <div class="large-8 small-9 columns">
      <input type="text" placeholder="Find Stuff">
    </div>
    <div class="large-4 small-3 columns">
      <a href="#" class="alert button expand">Search</a>
    </div>
  </div>
</li>

  <section class="top-bar-section">
      
    <ul class="left">
      <li class="has-dropdown">
          <a href="#" class="button" data-dropdown="hover1" data-options="is_hover:true">Reviews</a>
            <ul id="hover1" class="f-dropdown" data-dropdown-content>
                <li><a href="Movies">Movies</a></li>
                <li><a href="Television">Television</a></li>
                <li><a href="Video-games">Video Games</a></li>
                <li><a href="Books">Books</a></li>
                <li><a href="Music">Music</a></li>
                <li><a href="Anime/manga">Anime/Manga</a></li>
          </ul>
  </section>
      <section class="top-bar-section">
    <ul class="left">
      <li><a href="#">Videos</a></li>
    </ul>
  </section>
    <section class="top-bar-section">
    <ul class="left">
      <li><a href="#">Community</a></li>
    </ul>
  </section>
<section class="top-bar-section">
    <ul class="left">
      <li><a href="#">PMPodcast</a></li>
    </ul>
  </section>
</nav>
</div>
  </body>
</html>
         

<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">Procrasintation Masters</a></h1>
    </li>
    
  <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
    <li class="right">
  <div class="toot-bar-section">
    <div class="large-8 small-9 columns">
      <input type="text" placeholder="Find Stuff">
    </div>
    <div class="large-4 small-3 columns">
      <a href="#" class="alert button expand">Search</a>
    </div>
  </div>
</li>

  <section class="top-bar-section">
      
    <ul class="left">
      <li class="has-dropdown">
          <a href="#" class="button" data-dropdown="hover1" data-options="is_hover:true">Reviews</a>
            <ul id="hover1" class="f-dropdown" data-dropdown-content>
                <li><a href="Movies">Movies</a></li>
                <li><a href="Television">Television</a></li>
                <li><a href="Video-games">Video Games</a></li>
                <li><a href="Books">Books</a></li>
                <li><a href="Music">Music</a></li>
                <li><a href="Anime/manga">Anime/Manga</a></li>
          </ul>
  </section>
      <section class="top-bar-section">
    <ul class="left">
      <li><a href="#">Videos</a></li>
    </ul>
  </section>
    <section class="top-bar-section">
    <ul class="left">
      <li><a href="#">Community</a></li>
    </ul>
  </section>
<section class="top-bar-section">
    <ul class="left">
      <li><a href="#">PMPodcast</a></li>
    </ul>
  </section>
</nav>
</div>
  </body>
</html>
         

button

I am trying to get this drop down button and search bar to work but i can seem to get it right? Anyone know how to do this?

Thanks

<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">Procrasintation Masters</a></h1>
    </li>
    
  <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
    <li class="right">
  <div class="toot-bar-section">
    <div class="large-8 small-9 columns">
      <input type="text" placeholder="Find Stuff">
    </div>
    <div class="large-4 small-3 columns">
      <a href="#" class="alert button expand">Search</a>
    </div>
  </div>
</li>

  <section class="top-bar-section">
      
    <ul class="left">
      <li class="has-dropdown">
          <a href="#" class="button" data-dropdown="hover1" data-options="is_hover:true">Reviews</a>
            <ul id="hover1" class="f-dropdown" data-dropdown-content>
                <li><a href="Movies">Movies</a></li>
                <li><a href="Television">Television</a></li>
                <li><a href="Video-games">Video Games</a></li>
                <li><a href="Books">Books</a></li>
                <li><a href="Music">Music</a></li>
                <li><a href="Anime/manga">Anime/Manga</a></li>
          </ul>
  </section>
      <section class="top-bar-section">
    <ul class="left">
      <li><a href="#">Videos</a></li>
    </ul>
  </section>
    <section class="top-bar-section">
    <ul class="left">
      <li><a href="#">Community</a></li>
    </ul>
  </section>
<section class="top-bar-section">
    <ul class="left">
      <li><a href="#">PMPodcast</a></li>
    </ul>
  </section>
</nav>
</div>
  </body>
</html>
         

<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">Procrasintation Masters</a></h1>
    </li>
    
  <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
    <li class="right">
  <div class="toot-bar-section">
    <div class="large-8 small-9 columns">
      <input type="text" placeholder="Find Stuff">
    </div>
    <div class="large-4 small-3 columns">
      <a href="#" class="alert button expand">Search</a>
    </div>
  </div>
</li>

  <section class="top-bar-section">
      
    <ul class="left">
      <li class="has-dropdown">
          <a href="#" class="button" data-dropdown="hover1" data-options="is_hover:true">Reviews</a>
            <ul id="hover1" class="f-dropdown" data-dropdown-content>
                <li><a href="Movies">Movies</a></li>
                <li><a href="Television">Television</a></li>
                <li><a href="Video-games">Video Games</a></li>
                <li><a href="Books">Books</a></li>
                <li><a href="Music">Music</a></li>
                <li><a href="Anime/manga">Anime/Manga</a></li>
          </ul>
  </section>
      <section class="top-bar-section">
    <ul class="left">
      <li><a href="#">Videos</a></li>
    </ul>
  </section>
    <section class="top-bar-section">
    <ul class="left">
      <li><a href="#">Community</a></li>
    </ul>
  </section>
<section class="top-bar-section">
    <ul class="left">
      <li><a href="#">PMPodcast</a></li>
    </ul>
  </section>
</nav>
</div>
  </body>
</html>