<div class="top-bar menu-centered"> 
        <div class="title-bar" data-responsive-toggle="my-menu">
            <button class="menu-icon center" type="button" data-toggle="my-menu" data-responsive-toggle="my-menu"></button>
            <div class="title-bar-title menu-left">MENU</div>           
    </div> 
    <div class="top-bar" id="my-menu"> 
        <div class="top-bar-right">
          <ul class="menu expanded menu-centered" data-responsive-menu="drilldown medium-dropdown">        
            <li><a href="#">HOME</a></li>
            <li><a href="#">ALPHA</a></li>
            <li><a href="#">BETA</a></li>
            <li><a href="#"><b>WHITE SPACE</b></a></li>
            <li><a href="#">CHARLIE</a></li>
            <li><a href="#">DELTA</a></li>
            <li><a href="#">CONTACT</a></li>
          </ul>
        </div>   
    </div>

$menu-margin: 0rem;
$menu-margin-nested: 1rem;
$menu-item-padding: 1rem;
$menu-icon-spacing: 1.25rem;

$topbar-padding: 0;
$topbar-title-spacing: 0rem 1rem 0rem 0;
$topbar-input-width: 200px;
$topbar-unstack-breakpoint: medium;


.top-bar ul.menu li {  
  padding-left:.5em;
  padding-right:.5em;
}

.top-bar ul.menu li a {  
  border:1px solid blue;  
}

.top-bar-right ul.menu li {  
  white-space:nowrap;  
}

$(document).foundation();