小さい画面でスクロール可能なメニューを作成する

Question

私のメニューでは、<ul>のネストされた一連のタグを使用しており、<li>の中には<ul>と<li>が呼び出されています。これは私が知っている限り、ほとんどのメニューのかなり標準です。私のウェブサイトをモバイルデバイス上でうまく動作させるために、私はよりレスポンシブなデザインアプローチを採用し、ブラウザのサイズ変更に合わせてコンテンツを表示または非表示にするために@mediaクエリを使用することに決めました。

メニューを縮小すると、ドロップダウンが非表示になります（今のところ）。携帯版のメニューの横にある+アイコンをクリックして、そのサブリンクを見ることができる場所で、ハンバーガータイプのメニューを後で紹介します。

現在のところ、ブラウザのサイズを変更すると、メニューはabsoluteという表示になり、メニューのスクロールが無効になります。 iPhoneなどのユーザーが電話機を横向きにした場合、メニューは途切れ、下方向にスクロールして残りのメニューをこの向きで見ることはできません。ここでは、問題を描写する画像は、次のとおりです。

そしてここでは、ネストされたHTMLコードの例です：

<div id="navmenu"> 
    <ul> 
     <li><a href="#" class="homebutton"><div class="home"></div></a></li> 
     <li class='storelink dropdown'><a class='dropbtn' href='/store'>Store</a> 
      <div class='dropdown-content'> 
       <a href='/store?group=1'>All Items</a> 
      </div> 
     </li> 
     <li class='cartmenu'><a href='/cart'>Cart</a></li> 
     <li class='accountmenu dropdown'><a class='dropbtn' href='/account'>Account</a> 
      <div class='dropdown-content'> 
       <a href='/account'>Customer login</a> 
      </div> 
     </li> 
     <li><a href='/services'>Services</a></li> 
    </ul> 
</div> 

、最終的には、関連するCSS

#navmenu .dropdown:hover .dropdown-content { 
    display: block; 
    position: absolute; 
} 
#navmenu { 
    overflow-y: scroll; 
    display: none; 
    clear: both; 
    background: #333; 
    left: 0; 
    position: absolute; 
    float: none; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    border-bottom: 2px solid #fff; 
} 
#navmenu ul { 
    width: 100%; 
    text-align: center; 
} 
#navmenu li { 
    float: none; 
    clear: both; 
    background: #333; 
    width: 100%; 
    text-align: center; 
} 
#navmenu li a { 
    display: block; 
    width: 100%; 
    clear: both; 
    margin: 0; 
    padding: 10px 0; 
} 

獲得したのはなぜサイズ変更時にこのスクロールしませんか？

#navmenu { 
    height: 100%; 
    ... 
} 

Answer 1

してみてください。

また、#navmenuをfixed（絶対値ではない）とheight：100％の位置に設定してみることもできます。

Answer 2

うーん、あなたは#navmenuに固定の高さを与えて試すことができます。これを追加するおかげ