Dropdown menu in top bar closes on mousedown before firing link - zurb-foundation

Question

I have a top bar that contains a dropdown menu with links for the current user's account (e.g. Dashboard, Sign out, etc). Each menu item wraps a link that points to a relative URL.
Opening the menu works fine, but as soon as I click on an item, the menu closes and nothing happens.
I've looked for click and mousedown event handlers, but can't find anything that looks like it would be causing this.
Anyone have ideas about this?
Here's the relevant HTML code:
<div class="contain-to-grid nav-wrapper">
<nav data-topbar="data-topbar" role="navigation" class="top-bar">
<ul class="title-area">
<li class="name">
<h1>Site name</h1>
</li>
</ul>
<section data-hook="user-info" class="top-bar-section">
<ul class="right">
<li class="has-dropdown">
username
<ul class="dropdown">
<li>Dashboard</li>
<li>Sign out</li>
</ul>
</li>
</ul>
</section>
<section class="top-bar-section">
<ul class="right">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</section>
</nav>
</div>
And its fiddle: https://jsfiddle.net/a3qrhg5a/

Answer 1

You just probably forgot to include jQuery and initialize Foundation JS
For example:
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script>
$(document).foundation();
</script>
And here is your fiddle. Fixed:
https://jsfiddle.net/bartholomej/nxgjqtw4/5/