Zurb Foundation Topbar Not Working At All

Try wrapping your foundation() call in a jQuery(document).ready() function like so:

<script>    jQuery(document).ready({        jQuery(document).foundation();    });</script>

That's probably not the issue... But I'm wondering if your DOM is loading before or after your JS has a chance to fully load since you're loading your JS in the head.

Next, it looks like you might be missing the base Foundation JS file. You have this:

<script type="text/javascript" src="<? bloginfo('template_url'); ?>/css/foundation-5.2.2/js/foundation/foundation.topbar.js"></script>

But foundation.topbar.js depends on foundation.js (as do all of the Foundation plugins).

Next, how are you planning to class your submenus that WordPress is generating? Notice the markup in the Zurb Foundation docs:

  <li class="has-dropdown">    <a href="#">Right Button Dropdown</a>    <ul class="dropdown">      <li><a href="#">First link in dropdown</a></li>    </ul>  </li>

If you inspect your generated content I'm betting you're missing the "has-dropdown" class on the <li> and the "dropdown" class on the <ul>.

[edit]

I also noticed that you edited your markup in your question and now have two <nav> elements and both are defining a data-topbar attribute. (I'm not sure if that's just a paste error in your question or if your markup really looks like that).

Try using the following markup instead, just as a test, to see if the Foundation Topbar functionality is working (this is the sample from the docs):

<nav class="top-bar" data-topbar>  <ul class="title-area">    <li class="name">      <h1><a href="#">My Site</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">      <li class="active"><a href="#">Right Button Active</a></li>      <li class="has-dropdown">        <a href="#">Right Button Dropdown</a>        <ul class="dropdown">          <li><a href="#">First link in dropdown</a></li>        </ul>      </li>    </ul>    <!-- Left Nav Section -->    <ul class="left">      <li><a href="#">Left Nav Button</a></li>    </ul>  </section></nav>

If that does work, then reinspect your own markup, compare & contrast what classes and elements and nesting might be different and then adjust your code accordingly. It might just be easier to start with their example, and then tweak from there.