Div не прокручивается в конец

Question

У меня проблема с div, которую я хочу прокручивать.

Мое меню в этом div (это полноэкранный) this is it. Когда вы наводите указатель на элемент с дочерними элементами, меню расширяется и выходит из экрана, поэтому я добавил прокрутку, но он не прокручивается вниз (он скрывает последнее меню).

Вот мой CSS и HTML:

.tablet-menu { 
 
    display: none; 
 
    background: #000; 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 100%; 
 
    opacity: 0.7; 
 
    z-index: 1001; 
 
    -webkit-transition: all 0.8s ease-in-out; 
 
    -moz-transition: all 0.8s ease-in-out; 
 
    transition: all 0.8s ease-in-out; 
 
    -webkit-transition-delay: 0.2s; 
 
    -moz-transition-delay: 0.2s; 
 
    transition-delay: 0.2s; 
 
} 
 
.tablet-menu.show { 
 
    display: block; 
 
} 
 
.tablet-menu-scroll { 
 
    overflow: scroll; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.tablet-menu ul { 
 
    top: 0; 
 
    bottom: 0; 
 
    position: relative; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.tablet-menu li { 
 
    color: #FFF; 
 
    background: #000; 
 
} 
 
.tablet-menu li a { 
 
    text-transform: uppercase; 
 
    font-family: "Roboto Slab", Times, Georgia, serif; 
 
    font-weight: bold; 
 
    border-radius: 2px; 
 
    border-bottom: 1px solid white; 
 
    position: relative; 
 
    display: block; 
 
    padding-top: 4%; 
 
    padding-bottom: 4%; 
 
}

<div class="tablet-menu"> 
 
    <ul class="tablet-menu-scroll"> 
 
    <?php wp_nav_menu(array ('theme_location'=>'new-menu', 'container' => '', 'items_wrap' => '%3$s')); ?> 
 
    </ul> 
 
</div>

К сожалению для PHP я работаю на WordPress, я написал копию моего меню, без имен реальной страницы.

Там он: click

Я действительно не знаю, где проблема.

Answer 1

Попробуйте уменьшить отступ-топ или отступы дном или как согласно вашему требованию, как это:
.tablet-menu li a { padding-top: 3%; padding-bottom: 3%; }

Answer 2

As you want it to be arranged below: 

$(function(){ 
 
    $('#show').on('click', function(){ 
 
     $('.tablet-menu').addClass('show'); 
 
    }); 
 
});

.tablet-menu{ 
 
display:none; 
 
overflow:scroll; 
 
background:#000; 
 
height:100px; 
 
width:300px; 
 
opacity:0.7; 
 
z-index:1001; 
 
    -webkit-transition: all 0.8s ease-in-out; 
 
    -moz-transition: all 0.8s ease-in-out; 
 
    transition: all 0.8s ease-in-out; 
 
    -webkit-transition-delay: 0.2s; 
 
    -moz-transition-delay: 0.2s; 
 
    transition-delay: 0.2s; 
 
} 
 
.tablet-menu.show{ 
 
display:block; 
 
} 
 
.tablet-menu-scroll{ 
 
height:100%; 
 
width:100%; 
 
} 
 
.tablet-menu ul{ 
 
top:0; 
 
bottom:0; 
 
position:relative; 
 
text-align:center; 
 
padding:0; 
 
margin:0; 
 
} 
 
.tablet-menu li{ 
 
color:#FFF; 
 
background:#000; 
 
} 
 
.tablet-menu li a{ 
 
text-transform: uppercase; 
 
font-family: "Roboto Slab", Times, Georgia, serif; 
 
font-weight:bold; 
 
border-radius:2px; 
 
border-bottom:1px solid white; 
 
position:relative; 
 
display:block; 
 
padding-top:4%; 
 
padding-bottom:4%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<div class="tablet-menu"> 
 
      <ul class="tablet-menu-scroll"> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
       <li>item</li> 
 
      </ul> 
 
     </div> 
 

 
<button id="show">Show</button>