Мобильное меню прокручивается не до конца, в чём причина?

Question

[ImagineWorld]

Есть адаптивное меню.
Вот как оно выглядит на маленькой высоте устройства
А вот как должно.


Однако при скролле на небольшой высоте, он прокручивается не до конца и пункта "Выхю:од" не видно, как это можно исправить.

Вот код меню:

<div class=barmenu>
        <div class=bar1>
        </div>
        <div class=bar2>
        </div>
        <div class=bar3>
        </div>
        <ul class=menu__box>
                <li>
                    <a class="menu__item main-page"> Главная</a>
                        <li>
                             <a class="menu__item session-reports-link" href=#>Отчёты по сессиям</a>
                              <li>
                                <a class="menu__item payments-reports">Отчёты по платежам</a>
                                  <li>
                                   <a class="menu__item cardpay">Пополнить</a>
                                      <li>
                                     <a class="menu__item creditpay">Кредит</a>
                                      <li>
                                      <a class="menu__item payments-methods">Способ оплаты</a>
                                        <li>
                                           <a class="menu__item recalculation">Перерасчет</a>
                                           <li>
                                               <a class="menu__item myprofile">Профиль</a>
                                              <li>
                                               <a class="menu__item ">Услуги</a>
                                                 <li>
                                                  <a class="menu__item tarif">Тарифы</a>
                                                  <li>
                                                   <a class=menu__item>Подключить друга</a>
                                                   <li>
                                                    <a class=menu__item>Оставить заявку</a>
                                                      <li>
                                                    <a class="menu__item iptv">IPTV</a>
                                                      <li>
                                                        <a class=menu__item>Видеопортал</a>
                                                         <li>
                                                          <a class="menu__item exit"> Выход</a>
                                                           <li>
                                                          </li>
                                                           </ul>
                                                 </div>

.barmenu {
	display: none;
  }
  .menu__box {
	display: block;
	position: fixed;
	visibility: hidden;
	overflow:auto;
	transition:0.7s;
	top: 50px;
	left: -100%;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 20px 0 20px 0;
	list-style: none;
	text-align: center;
	background-color: #ECEFF1;
	box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
	z-index:9999;
  }
  /* элементы меню */
  .menu__item {
	display: block;
	padding: 12px 24px;
	color: #333;
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	font-weight: 600;
	text-decoration: none;
  }
  .menu__item:hover {
	cursor: pointer;
	background-color: #68ABE9;
  }

Comments

[bossigorxxx]

А можно ссылку на сайт? Скорей всего надо задать высоту в ручную для меню

[yavaskript]

немного не в тему, но почему вы не закрываете <li>?

[ImagineWorld]

yavaskript, они автоматом закрываются сами

Answer 1

[ImagineWorld]

Решил следующим образом: задал для меню height:auto; и bottom:0;
Хз что это дало, но помогло.