Official JsFiddle Foundation 5.2.3

by Ritesh Kashyap

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.3/js/vendor/modernizr.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.3/css/foundation.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.3/js/foundation.min.js"></script>
<a data-dropdown="drop1" aria-controls="drop1" class="button dropdown" aria-expanded="false">Has Dropdown</a>
<ul id="drop1" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
  <li><a href="#">This is a link</a></li>
  <li><a href="#">This is another</a></li>
  <li><a href="#">Yet another</a></li>
</ul>

CSS

.dropdown{
  font-size: 14px;
    line-height: 15px;
    color: #7b7a7f;
    text-transform: uppercase;
    background-color:#fff;
    color:#000;
    border:2px solid #ebebeb;
}
.f-dropdown > li.active {
    font-weight: bold;
    background-color: #eee;
}

JavaScript

$(document).foundation();
$('#drop1 li').click(function(){
     $('#drop1 li').removeClass("active");
     $(this).addClass("active");
     $('dropdown').text($(this).text());
});