navメニューバーを水平スクロールする方法

Question

小さな画面サイズのときにいくつかのliタグを付けたナビゲーションバーがあります。小さなデバイス画面ではNavバーを同じ高さにして水平にスクロールしたいが、私が試していることはすべて動作していない。誰かがここで間違っている光を照らすことができます！

HMTL：

<nav role="navigation" class="site-navigation main-navigation"> 
    <div class="menu"> 
    <ul> 
     <li class="page_item page-item-40"><a href="http://localhost/property_abba/for-sale/">Buy</a></li> 
     <li class="page_item page-item-41"><a href="http://localhost/property_abba/for-rent/">Rent</a></li> 
     <li class="page_item page-item-7"><a href="http://localhost/property_abba/sell/">Sell</a></li> 
     <li class="page_item page-item-9 current_page_item"><a href="http://localhost/property_abba/valuations/">Valuations</a></li> 
     <li class="page_item page-item-15"><a href="http://localhost/property_abba/property-management/">Property Management</a></li> 
     <li class="page_item page-item-11"><a href="http://localhost/property_abba/about-us/">About Us</a></li> 
     <li class="page_item page-item-13"><a href="http://localhost/property_abba/contact-us/">Contact Us</a></li> 
    </ul> 
    </div> 
</nav> 

CSS：

@media screen and (max-width : 480px){ 
    div.menu ul { 
    display: inline-block; 
    max-height: 34px; 
    overflow: auto; 
    white-space: nowrap; 
    } 
    div.menu a { 
    display: inline-block; 
    text-align: center; 
    } 
} 

しかし、これは現在動作していません。

Answer 1

水平スクロールメニュー携帯

<style type="text/css"> 
    @media screen and (max-width : 480px){ 
     div.menu ul { 
     display: inline-block; 
     width: 85%; 
     display: inline-block; 
     padding-bottom:20px; 
     white-space: nowrap; 
     overflow-y: hidden; 
     overflow-x: scroll; 
     -webkit-overflow-scrolling: touch; 
     -ms-overflow-style: -ms-autohiding-scrollbar; 
     } 
     div.menu li { 
      display: inline-block; 
     } 
     div.menu li a { 
     text-align: center; 
     } 
    } 
    </style> 
    <nav role="navigation" class="site-navigation main-navigation"> 
     <div class="menu"> 
     <ul> 
      <li class="page_item page-item-40"><a href="http://localhost/property_abba/for-sale/">Buy</a></li> 
      <li class="page_item page-item-41"><a href="http://localhost/property_abba/for-rent/">Rent</a></li> 
      <li class="page_item page-item-7"><a href="http://localhost/property_abba/sell/">Sell</a></li> 
      <li class="page_item page-item-9 current_page_item"><a href="http://localhost/property_abba/valuations/">Valuations</a></li> 
      <li class="page_item page-item-15"><a href="http://localhost/property_abba/property-management/">Property Management</a></li> 
      <li class="page_item page-item-11"><a href="http://localhost/property_abba/about-us/">About Us</a></li> 
      <li class="page_item page-item-13"><a href="http://localhost/property_abba/contact-us/">Contact Us</a></li> 
     </ul> 
     </div> 
    </nav>