モバイルで固定ヘッダーのドロップダウンメニューが表示される

Question

モバイルの固定ヘッダーのドロップダウンメニューに問題があります。メニュー項目の上にマウスを置くと、そのサブメニューが開きますが、サブメニュークラスにを入れていますが、スクロールして非表示の項目を表示することはできません。

HTML：

<div class="site-header"> 
    <div class="main-navigation"> 
     <ul class="nav-menu"> 
      <li class="menu-item"><a href="#">Item 1</a> 
      <ul class="sub-menu"> 
       <li class="menu-item"><a href="#">Item 1.1</a></li> 
       <li class="menu-item"><a href="#">Item 1.2</a></li> 
       <li class="menu-item"><a href="#">Item 1.3</a></li> 
       <li class="menu-item"><a href="#">Item 1.4</a></li> 
       <li class="menu-item"><a href="#">Item 1.5</a></li> 
       <li class="menu-item"><a href="#">Item 1.6</a></li> 
       <li class="menu-item"><a href="#">Item 1.7</a></li> 
       <li class="menu-item"><a href="#">Item 1.8</a></li> 
       <li class="menu-item"><a href="#">Item 1.9</a></li> 
      </ul> 
      </li> 
      <li class="menu-item"><a href="#">Item 2</a> 
      <ul class="sub-menu"> 
       <li class="menu-item"><a href="#">Item 2.1</a></li> 
       <li class="menu-item"><a href="#">Item 2.2</a></li> 
       <li class="menu-item"><a href="#">Item 2.3</a></li> 
       <li class="menu-item"><a href="#">Item 2.4</a></li> 
       <li class="menu-item"><a href="#">Item 2.5</a></li> 
       <li class="menu-item"><a href="#">Item 2.6</a></li> 
       <li class="menu-item"><a href="#">Item 2.7</a></li> 
       <li class="menu-item"><a href="#">Item 2.8</a></li> 
       <li class="menu-item"><a href="#">Item 2.9</a></li> 
      </ul> 
      </li> 
      <li class="menu-item"><a href="#">Item 3</a> 
      <ul class="sub-menu"> 
       <li class="menu-item"><a href="#">Item 3.1</a></li> 
       <li class="menu-item"><a href="#">Item 3.2</a></li> 
       <li class="menu-item"><a href="#">Item 3.3</a></li> 
       <li class="menu-item"><a href="#">Item 3.4</a></li> 
       <li class="menu-item"><a href="#">Item 3.5</a></li> 
       <li class="menu-item"><a href="#">Item 3.6</a></li> 
       <li class="menu-item"><a href="#">Item 3.7</a></li> 
       <li class="menu-item"><a href="#">Item 3.8</a></li> 
       <li class="menu-item"><a href="#">Item 3.9</a></li> 
      </ul> 
      </li> 
      <li class="menu-item"><a href="#">Item 4</a> 
      <ul class="sub-menu"> 
       <li class="menu-item"><a href="#">Item 4.1</a></li> 
       <li class="menu-item"><a href="#">Item 4.2</a></li> 
       <li class="menu-item"><a href="#">Item 4.3</a></li> 
       <li class="menu-item"><a href="#">Item 4.4</a></li> 
       <li class="menu-item"><a href="#">Item 4.5</a></li> 
       <li class="menu-item"><a href="#">Item 4.6</a></li> 
       <li class="menu-item"><a href="#">Item 4.7</a></li> 
       <li class="menu-item"><a href="#">Item 4.8</a></li> 
       <li class="menu-item"><a href="#">Item 4.9</a></li> 
      </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

CSS：

.site-header { 
    position: fixed; 
    left: 0; 
    width: 100%; 
    z-index: 999; 
} 

.main-navigation { 
    text-align: center; 
} 

.main-navigation ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.main-navigation li { 
    position: relative; 
} 

.main-navigation a { 
    display: block; 
    padding: 0.9em; 
    color: #333; 
    border: 1px solid #ccc; 
    cursor: pointer; 
    text-decoration: none; 
} 

.main-navigation ul li > ul.sub-menu { 
    display: none; 
    overflow-y: scroll; 
    background: #eaeaea; 
} 

.main-navigation ul li:hover > ul.sub-menu, 
.main-navigation ul li.focus > ul.sub-menu { 
    display: block; 
} 

FIDDLE：

http://jsfiddle.net/cb0Lbuto/24/

アイデア？

Answer 1

iが使用max-height

.main-navigation ul li > ul.sub-menu { 
    background: #eaeaea none repeat scroll 0 0; 
    display: none; 
    max-height: 320px; 
    overflow: auto; 
} 

Answer 2

CSSスタイルを追加予め

おかげ（ヘッダを固定する必要があり、Iは、相対的または絶対的にそれを変更することはできません）。

.dropdown-submenu { 
     position: relative; 
    } 

     .dropdown-submenu > .dropdown-menu { 
      top: 0; 
      left: 100%; 
      margin-top: -6px; 
      margin-left: -1px; 
      -webkit-border-radius: 0 6px 6px 6px; 
      -moz-border-radius: 0 6px 6px; 
      border-radius: 0 6px 6px 6px; 
      border-color:#f2f2f2; 
     } 

     .dropdown-submenu:active > .dropdown-menu { 
      display: block; 
     } 

     .dropdown-submenu > a:after { 
      display: block; 
      content: " "; 
      float: right; 
      width: 0; 
      height: 0; 
      border-color: transparent; 
      border-style: solid; 
      border-width: 5px 0 5px 5px; 
      border-left-color: #ccc; 
      margin-top: 5px; 
      margin-right: -10px; 
     } 

     .dropdown-submenu:active > a:after { 
      border-left-color: white; 
     } 

     .dropdown-submenu.pull-left { 
      float: none; 
     } 

      .dropdown-submenu.pull-left > .dropdown-menu { 
       left: -100%; 
       margin-left: 10px; 
       -webkit-border-radius: 6px 0 6px 6px; 
       -moz-border-radius: 6px 0 6px 6px; 
       border-radius: 6px 0 6px 6px; 
      } 


       .dropdown-submenu{ 

    background-color:white; 
    color:black; 
} 

JSスクリプト： -

$(document).ready(function() { 
     $("li.dropdown-submenu > a").on("click", function() { 
      $("li.dropdown-submenu").removeClass("open"); 
      if ($(this).parent("li.dropdown-submenu").hasClass("in-use")) { 
       $(this).parents("li.dropdown-submenu").addClass("open"); 
       $(this).parent("li.dropdown-submenu").removeClass("open"); 
       $(this).parent("li.dropdown-submenu").removeClass("in-use"); 
       $(this).siblings("ul.dropdown-menu").children("li.dropdown-submenu").removeClass("open"); 
       $(this).siblings("ul.dropdown-menu").children("li.dropdown-submenu").removeClass("in-use"); 
      } else { 
       $(this).parents("li.dropdown-submenu").addClass("open"); 
       $(this).parents("li.dropdown-submenu").addClass("in-use"); 
      } 
      return false; 
     }); 
    });