CSS - Вертикальное меню не работает на мобильном устройстве

Question

Я пытаюсь создать двухслойное и вертикальное раскрывающееся меню. Каждое главное меню имеет 20 пунктов (подменю) отдельно. Это нормально при просмотре с помощью панели инструментов Chrome. Однако это не работает на мобильном устройстве, элементы за пределами одной страницы невидимы. Есть ли способ решить эту проблему? Большое спасибо.

 $(function(){
     $('.btn-primary ').click(function(){
            $('ul').hide('fast');     
            $('ul',this).show('fast');
     });
 });

    li{list-style: none;}
    .btn-primary{
        display:flex;
        flex-direction: column;
        color:white;
        font-size:22px;
        width:150px;
        background-color: #353535;
        position: relative;
    }
    .btn-primary:hover, .btn-primary:focus, .btn-primary:active{
        border-style:none;
        background-color: #233858;
     }
    .submenu{
        display:flex;
        flex-direction: column;
        position:absolute;   
        top:0;
        left:80%;
        width:150px;
        display: none;    
    }
    .btn{
        margin-bottom:10px;
        height:36px;
        background-color:#233858;   
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
       <div class="container">
        <button class='btn-primary'>menu 1
            <ul class="submenu">
							<li class="btn">menu 1-01</li>
							<li class="btn">menu 1-02</li>
							<li class="btn">menu 1-03</li>
							<li class="btn">menu 1-04</li>
							<li class="btn">menu 1-05</li>
							<li class="btn">menu 1-06</li>
							<li class="btn">menu 1-07</li>
							<li class="btn">menu 1-08</li>
							<li class="btn">menu 1-09</li>
							<li class="btn">menu 1-10</li>
							<li class="btn">menu 1-11</li>
							<li class="btn">menu 1-12</li>
							<li class="btn">menu 1-13</li>
							<li class="btn">menu 1-14</li>
							<li class="btn">menu 1-15</li>
							<li class="btn">menu 1-16</li>
							<li class="btn">menu 1-17</li>
							<li class="btn">menu 1-18</li>
							<li class="btn">menu 1-19</li>
							<li class="btn">menu 1-20</li>
            </ul>
        </button>
        <button class='btn-primary'>menu 2
            <ul class="submenu">
							<li class="btn">menu 2-01</li>
							<li class="btn">menu 2-02</li>
							<li class="btn">menu 2-03</li>
							<li class="btn">menu 2-04</li>
							<li class="btn">menu 2-05</li>
							<li class="btn">menu 2-06</li>
							<li class="btn">menu 2-07</li>
							<li class="btn">menu 2-08</li>
							<li class="btn">menu 2-09</li>
							<li class="btn">menu 2-10</li>
							<li class="btn">menu 2-11</li>
							<li class="btn">menu 2-12</li>
							<li class="btn">menu 2-13</li>
							<li class="btn">menu 2-14</li>
							<li class="btn">menu 2-15</li>
							<li class="btn">menu 2-16</li>
							<li class="btn">menu 2-17</li>
							<li class="btn">menu 2-18</li>
							<li class="btn">menu 2-19</li>
							<li class="btn">menu 2-20</li>
            </ul>
        </button>
        <button class='btn-primary'>menu 3
            <ul class="submenu">
							<li class="btn">menu 3-01</li>
							<li class="btn">menu 3-02</li>
							<li class="btn">menu 3-03</li>
							<li class="btn">menu 3-04</li>
							<li class="btn">menu 3-05</li>
							<li class="btn">menu 3-06</li>
							<li class="btn">menu 3-07</li>
							<li class="btn">menu 3-08</li>
							<li class="btn">menu 3-09</li>
							<li class="btn">menu 3-10</li>
							<li class="btn">menu 3-11</li>
							<li class="btn">menu 3-12</li>
							<li class="btn">menu 3-13</li>
							<li class="btn">menu 3-14</li>
							<li class="btn">menu 3-15</li>
							<li class="btn">menu 3-16</li>
							<li class="btn">menu 3-17</li>
							<li class="btn">menu 3-18</li>
							<li class="btn">menu 3-19</li>
							<li class="btn">menu 3-20</li>
            </ul>
        </button>                 
    </div> 

фото

Answer 1

Добавлен CSS к ul, установив max-height и overflow на auto, при этом никогда не выходит за пределы max-width. Если существует больше элементов, автоматически добавляется полоса прокрутки. Так что вам не нужно беспокоиться о прокрутке.

$(function() {
  $('.btn-primary ').click(function() {
    $('ul').hide('fast');
    $('ul', this).show('fast');
  });
});

li {
  list-style: none;
}

.btn-primary {
  display: flex;
  flex-direction: column;
  color: white;
  font-size: 22px;
  width: 150px;
  background-color: #353535;
  position: relative;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  border-style: none;
  background-color: #233858;
}

.submenu {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 80%;
  width: 150px;
  display: none;
}

.btn {
  margin-bottom: 10px;
  height: 36px;
  background-color: #233858;
}
ul{
  max-height:250px;
  overflow:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button class='btn-primary'>menu 1
            <ul class="submenu">
							<li class="btn">menu 1-01</li>
							<li class="btn">menu 1-02</li>
							<li class="btn">menu 1-03</li>
							<li class="btn">menu 1-04</li>
							<li class="btn">menu 1-05</li>
							<li class="btn">menu 1-06</li>
							<li class="btn">menu 1-07</li>
							<li class="btn">menu 1-08</li>
							<li class="btn">menu 1-09</li>
							<li class="btn">menu 1-10</li>
							<li class="btn">menu 1-11</li>
							<li class="btn">menu 1-12</li>
							<li class="btn">menu 1-13</li>
							<li class="btn">menu 1-14</li>
							<li class="btn">menu 1-15</li>
							<li class="btn">menu 1-16</li>
							<li class="btn">menu 1-17</li>
							<li class="btn">menu 1-18</li>
							<li class="btn">menu 1-19</li>
							<li class="btn">menu 1-20</li>
            </ul>
        </button>
  <button class='btn-primary'>menu 2
            <ul class="submenu">
							<li class="btn">menu 2-01</li>
							<li class="btn">menu 2-02</li>
							<li class="btn">menu 2-03</li>
							<li class="btn">menu 2-04</li>
							<li class="btn">menu 2-05</li>
							<li class="btn">menu 2-06</li>
							<li class="btn">menu 2-07</li>
							<li class="btn">menu 2-08</li>
							<li class="btn">menu 2-09</li>
							<li class="btn">menu 2-10</li>
							<li class="btn">menu 2-11</li>
							<li class="btn">menu 2-12</li>
							<li class="btn">menu 2-13</li>
							<li class="btn">menu 2-14</li>
							<li class="btn">menu 2-15</li>
							<li class="btn">menu 2-16</li>
							<li class="btn">menu 2-17</li>
							<li class="btn">menu 2-18</li>
							<li class="btn">menu 2-19</li>
							<li class="btn">menu 2-20</li>
            </ul>
        </button>
  <button class='btn-primary'>menu 3
            <ul class="submenu">
							<li class="btn">menu 3-01</li>
							<li class="btn">menu 3-02</li>
							<li class="btn">menu 3-03</li>
							<li class="btn">menu 3-04</li>
							<li class="btn">menu 3-05</li>
							<li class="btn">menu 3-06</li>
							<li class="btn">menu 3-07</li>
							<li class="btn">menu 3-08</li>
							<li class="btn">menu 3-09</li>
							<li class="btn">menu 3-10</li>
							<li class="btn">menu 3-11</li>
							<li class="btn">menu 3-12</li>
							<li class="btn">menu 3-13</li>
							<li class="btn">menu 3-14</li>
							<li class="btn">menu 3-15</li>
							<li class="btn">menu 3-16</li>
							<li class="btn">menu 3-17</li>
							<li class="btn">menu 3-18</li>
							<li class="btn">menu 3-19</li>
							<li class="btn">menu 3-20</li>
            </ul>
        </button>
</div>

Answer 2

Попробуйте этот код. это работает в мобильном телефоне, также я добавил тумблер скрыть и показать в нем.

 $(function(){
     $('.btn-primary ').click(function(){
            $('ul').hide('fast');
            var x = $('ul',this).css('display');
            if (x === "none") {
                $('ul',this).show('fast');
            } else {
                $('ul',this).hide('fast');
            }
     });
 });

    li{list-style: none;}
    .btn-primary{
        display:flex;
        flex-direction: column;
        color:white;
        font-size:22px;
        width:150px;
        background-color: #353535;
        position: relative;
    }
    .btn-primary:hover, .btn-primary:focus, .btn-primary:active{
        border-style:none;
        background-color: #233858;
     }
    .submenu{
        display:flex;
        flex-direction: column;
        position:absolute;   
        top:0;
        left:80%;
        width:150px;
        display: none;    
    }
    .btn{
        margin-bottom:10px;
        height:36px;
        background-color:#233858;   
    }
    @media(max-width: 767px){
      .submenu{
          display:flex;
          flex-direction: column;
          position:absolute;   
          top:35px;
          left:0;
          padding:0;
          width:150px;
          display: none; 
          z-index:1;
      }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
       <div class="container">
        <button class='btn-primary'>menu 1
            <ul class="submenu">
							<li class="btn">menu 1-01</li>
							<li class="btn">menu 1-02</li>
							<li class="btn">menu 1-03</li>
							<li class="btn">menu 1-04</li>
							<li class="btn">menu 1-05</li>
							<li class="btn">menu 1-06</li>
							<li class="btn">menu 1-07</li>
							<li class="btn">menu 1-08</li>
							<li class="btn">menu 1-09</li>
							<li class="btn">menu 1-10</li>
							<li class="btn">menu 1-11</li>
							<li class="btn">menu 1-12</li>
							<li class="btn">menu 1-13</li>
							<li class="btn">menu 1-14</li>
							<li class="btn">menu 1-15</li>
							<li class="btn">menu 1-16</li>
							<li class="btn">menu 1-17</li>
							<li class="btn">menu 1-18</li>
							<li class="btn">menu 1-19</li>
							<li class="btn">menu 1-20</li>
            </ul>
        </button>
        <button class='btn-primary'>menu 2
            <ul class="submenu">
							<li class="btn">menu 2-01</li>
							<li class="btn">menu 2-02</li>
							<li class="btn">menu 2-03</li>
							<li class="btn">menu 2-04</li>
							<li class="btn">menu 2-05</li>
							<li class="btn">menu 2-06</li>
							<li class="btn">menu 2-07</li>
							<li class="btn">menu 2-08</li>
							<li class="btn">menu 2-09</li>
							<li class="btn">menu 2-10</li>
							<li class="btn">menu 2-11</li>
							<li class="btn">menu 2-12</li>
							<li class="btn">menu 2-13</li>
							<li class="btn">menu 2-14</li>
							<li class="btn">menu 2-15</li>
							<li class="btn">menu 2-16</li>
							<li class="btn">menu 2-17</li>
							<li class="btn">menu 2-18</li>
							<li class="btn">menu 2-19</li>
							<li class="btn">menu 2-20</li>
            </ul>
        </button>
        <button class='btn-primary'>menu 3
            <ul class="submenu">
							<li class="btn">menu 3-01</li>
							<li class="btn">menu 3-02</li>
							<li class="btn">menu 3-03</li>
							<li class="btn">menu 3-04</li>
							<li class="btn">menu 3-05</li>
							<li class="btn">menu 3-06</li>
							<li class="btn">menu 3-07</li>
							<li class="btn">menu 3-08</li>
							<li class="btn">menu 3-09</li>
							<li class="btn">menu 3-10</li>
							<li class="btn">menu 3-11</li>
							<li class="btn">menu 3-12</li>
							<li class="btn">menu 3-13</li>
							<li class="btn">menu 3-14</li>
							<li class="btn">menu 3-15</li>
							<li class="btn">menu 3-16</li>
							<li class="btn">menu 3-17</li>
							<li class="btn">menu 3-18</li>
							<li class="btn">menu 3-19</li>
							<li class="btn">menu 3-20</li>
            </ul>
        </button>                 
    </div>