CSS: высота подменю: 100% // позиция: фиксированная

Question

Я перепробовал множество стилей элементов для создания прокручиваемого подменю, когда у нас много "li". Происходит следующее: когда родитель открыт, подменю смещает экран мобильного устройства и не создает прокрутки.

В любом случае необходимо вызвать родительский «menu-item-486» (когда мы имеем stati c позиция в $ this и подменю с высотой элемента: 100%) для создания прокрутки с высотой не менее 100% (ie: подменю с высотой: 400px);

Я создаю класс «fixHeightOffset» для использования при необходимости.

Мое меню более или менее таково:

<div class="menu-menu-container">
<ul id="primary-menu" class="nav navbar-nav">
<li id="menu-item-15"><a href="#">Home</a></li>


<li id="menu-item-486" class="menu-item menu-item-has-children sub-menu-open"><a href="#">Menu</a>
<ul class="sub-menu show fixHeightOffset">
<li id="menu-item-1" class="menu-item menu-item-1"><a href="#">All</a></li>
<li id="menu-item-4" class="menu-item menu-item-4"><a href="#">A</a></li>
<li id="menu-item-5" class="menu-item menu-item-5"><a href="#">B</a></li>
<li id="menu-item-6" class="menu-item menu-item-6"><a href="#">C</a></li>
<li id="menu-item-7" class="menu-item menu-item-7 menu-item-has-children sub-menu-open">
<a href="#">I</a>
    <ul class="sub-menu show">
    <li id="menu-item-57" class="menu-item menu-item-57"><a href="#">D</a></li>
    <li id="menu-item-59" class="menu-item menu-item-59"><a href="#">M</a></li>
    <li id="menu-item-60" class="menu-item menu-item-60"><a href="#">B </a></li>
    </ul>
</li>
    <li id="menu-item-48" class="menu-item menu-item-48"><a href="#">L</a></li>
    <li id="menu-item-51" class="menu-item menu-item-51"><a href="#">M</a></li>
    <li id="menu-item-46" class="menu-item menu-item-46"><a href="#">N</a></li>
    <li id="menu-item-47" class="menu-item menu-item-47"><a href="#">O</a></li>
    <li id="menu-item-50" class="menu-item menu-item-48"><a href="#">P</a></li>
</ul>
</li>
</ul>
</div>

Спасибо!