时间戳

首页 > 解决方案 > CSS - 垂直 dorp-down 菜单在移动设备上不起作用

html - CSS - 垂直 dorp-down 菜单在移动设备上不起作用

问题描述

我正在尝试创建一个两层垂直下拉菜单。每个主菜单分别有 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>

照片

标签： htmlcss

解决方案

ul通过设置max-heightandoverflow来添加一个 css toauto永远不会超过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>

推荐阅读