基础顶部栏问题：添加更多菜单项时，菜单项会浮动

Question

在Zurb基金会，我发现顶级酒吧运作良好。但是，每当添加大量菜单项时，菜单项都会向下浮动而不是折叠。 正常图像：

问题图片：

预期图片：

代码：

  <div class="fixed">
  <nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area"> 
  <li class="name"> 

  </li>
  <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>
  <section class="top-bar-section">
  <ul class="left">
  <li class="has-dropdown"><a href="#">WIKISAN</a>
  <ul class="dropdown">
  <li><a href="user/setlocation/8090220140000009" title="Click here to set program and location">Choose Another Program</a></li>
  <li><a href="index">Home</a></li>
  </ul>
  </li>
  <li class="has-dropdown"><a href="#">Organization</a>
  <ul class="dropdown">
  <li><a href="organization/list">List Organization</a></li>            
  <li><a href="organization/add">Add Organization</a></li>        
  </ul>
  </li>
  <li class="has-dropdown"><a href="#">Group</a>
  <ul class="dropdown">
  <li><a href="group/list">List Group</a></li>            
  <li><a href="group/add">Add Group</a></li>        
  </ul>
  </li>
  <li class="has-dropdown"><a href="#">Individual</a>
  <ul class="dropdown">
  <li><a href="individual/list">List Individual</a></li>          
  <li><a href="individual/add">Add Individual</a></li>          
  <li><a href="individual/add_to_program">Add Individual To Program</a></li>          
  </ul>
  </li>      
  <li class="has-dropdown"><a href="#">Program</a>
  <ul class="dropdown">
  <li class="has-dropdown"><a href="#">Kisan</a>
  <ul class="dropdown">
  <li><a href="#">Kisan Training Form</a></li>
  <li><a href="#">Kisan Training List </a></li>
  <li><a href="leverage/add">Kisan Leverage Form</a></li>
  <li><a href="leverage/list">Kisan Leverage List</a></li>
  <li><a href="asset">Kisan Asset </a></li>
  <li><a href="seed">Kisan Seed </a></li>
  </ul>
  </li>  
  </ul>
  </li><li class="has-dropdown"><a href="#">Settings</a>
  <ul class="dropdown">
  <li><a href="unit/convert" class="converter">Land Unit Converter</a></li><li><a href="indicator/add">Add Indicator</a></li><li><a href="district/add">Add District</a></li><li class="has-dropdown"><a href="#">Individual Lookup</a>
  <ul class="dropdown">
  <li><a href="indvact/list">Individual Activity</a></li>
  <li><a href="indvedu/list">Individual Education</a></li>
  <li><a href="indvlang/list">Language</a></li>
  <li><a href="indvlat/list">Latrine Type</a></li>
  <li><a href="indvocc/list">Occupation List</a></li>
  <li><a href="indvproj/list">Project List</a></li>
  <li><a href="indvrel/list">Religion</a></li>
  <li><a href="indvsoc/list">Social Group</a></li>
  </ul>
  </li><li class="has-dropdown"><a href="#">Organization Lookup</a>
  <ul class="dropdown">
  <li><a href="orgcat/list">Organization Category</a></li>
  <li><a href="orgcmp/list">Organization Component</a></li>                        
  <li><a href="orgstage/list">OCAT Stage List</a></li>
  <li><a href="orgsec/list">Organization Sector</a></li>
  <li><a href="orgtype/list">Organization Type</a></li>
  </ul>
  </li><li class="has-dropdown"><a href="#">Group Lookup</a>
  <ul class="dropdown">
  <li><a href="grpreg/list">Group Registration</a></li>
  <li><a href="orgsec/list">Group Sector</a></li>
  <li><a href="grptype/list">Group Type</a></li>
  </ul>
  </li><li class="has-dropdown"><a href="#">Training Lookup</a>
  <ul class="dropdown">
  <li><a href="trnsector/list">Training Sector</a></li>
  <li><a href="bentype/list">Beneficiary Type</a></li>
  <li><a href="trntype/list">Training Type</a></li>
  </ul></li><li class="has-dropdown"><a href="#">Leverage Lookup</a>
  <ul class="dropdown">
  <li><a href="lvgscheme/list">Leverage Scheme</a></li>
  </ul></li></ul></li>      <li class="has-dropdown"><a href="#">Report</a>
  <ul class="dropdown">
  <li><a href="report/dashboard">Report Dashboard</a></li>
  <li><a href="report/summary">Summary Query Report</a></li>
  </ul>
  </li>   
  </ul>
  <ul class="right">
  <li class="has-dropdown"><a href="individual/view/2090220140000001"> Logged in as Sujit Prasad Baniya</a>
  <ul class="dropdown">

  <li><a href="user/password/8090220140000009">Change Password</a></li><li><a href="user/defaultlocation/8090220140000009">User Location Settings</a></li><li class="has-dropdown"><a href="#">Admin</a>
  <ul class="dropdown"><li><a href="user/add">Add users</a></li>
  <li><a href="user/list">List users</a></li>
  <li><a href="program/target">Set Program Targets</a></li>
  <li><a href="user/setdefault">Set Default Location</a></li>
  <li><a href="user/querylog">Query Log Report</a></li><li><a href="#" class="debug-on">Debug Mode On</a></li><li><a href="program/add">Add Program</a></li>
  <li><a href="program/list">List Program</a></li>
  <li><a href="activity/add">Add Activity</a></li>
  <li><a href="activity/add_to_program">Add Activity To Program</a></li></ul></li>  
  <li><a href="logout">Logout</a></li>

  </ul>
  </li>
  </ul>
  </section>
  </nav>
  </div>

以下是生成以下结果的代码