別のページをロードするときに基礎トップバーが破損する

私は現在、cssフレームワークとしてのルビーと基盤上のルビーを使って小さなウェブサイトを構築しています。ネストされたドロップダウンである2つのアイテムでナビゲーションのトップバーを実装しました。下図に示すように別のページをロードするときに基礎トップバーが破損する

<body> 
    <div class="top-bar"> 
    <div class="top-bar-left"> 
     <ul class="dropdown menu" data-dropdown-menu> 
      <li class="menu-text">Logo</li> 
      <li><a href="/">Home</a></li> 
      <li><a href="/stats">Statistics</a></li> 
      <li><a href="/news">News</a></li> 
      <li><a href="/items">Items</a> 
       <ul class="menu"> 
        <li><a href="#">Infected items</a></li> 
        <li><a href="#">Detective items</a></li> 
       </ul> 
      </li> 
      <li><a href="/guides">Guides</a> 
       <ul class="menu"> 
        <li><a href="#">Lore</a></li> 
        <li><a href="#">Beginner tutorial</a></li> 
        <li><a href="#">Mod rules</a></li> 
        <li><a href="#">Strategy guide</a></li> 
        <li><a href="#">How to be a good detective?</a></li> 
       </ul> 
      </li> 



     </ul> 
    </div> 
</div>

：ここ

は私のレイアウト/ application.html.erb内にあるトップバーコードである