javascript - Foundation top bar issue: The menu items floats down when added more menu items -

javascript - Foundation top bar issue: The menu items floats down when added more menu items -

in zurb foundation, i've found top-bar working good. whenever big no of menu items added, menu items float downwards instead of collapsing. normal image:

issue image:

expected image:

code:

<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 set programme , location">choose 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 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 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 programme 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 program</a></li></ul></li> <li><a href="logout">logout</a></li> </ul> </li> </ul> </section> </nav> </div>

here code generated next result

javascript php jquery css zurb-foundation