0
モバイルデバイス用の固定メニューを作成しました。すべては問題ありませんが、ビューポートからオーバーフローするサブメニューに関する問題があり、スクロール中にドキュメント本体だけがスクロールされ、メニューの隠れた部分はビューポートの外に保持され続けます。コンテナにoverflow:scrollを使用しましたが、修正できませんでした。モバイルデバイスのスティッキーメニューと固定メニューのサブメニューをスクロールする方法
section {
height:200px;
width:100%;
margin:0;
padding:0;
}
.p1 {background:#656161}
.p2 {background:#87E857}
.p3 {background:#E28EBC}
.p4 {background:#DBDE46}
.p5 {background:#57BCEF}
.p6 {background:#ff0000}
ul {
list-style:none;
margin:0;
padding:0;
}
nav {
position:fixed;
top:0;
left:0;
background:#73CADB;
width:100%;
height:38px;
}
nav ul > li {
float:left;
width:150px;
position:relative;
padding:10px;
background: #73CADB;
border-right:1px solid #fff;
-webkit-transition:all .3s ease;
transition:all .3s ease;
}
nav ul > li i{
position:absolute;
right:20px;
}
nav ul > li:hover,
nav ul > li.hovered{
background: #E6A735;
}
nav ul > li a{
text-decoration:none;
color:#fff;
}
nav ul > li > ul{
position:absolute;
width:70%;
top:38px;
left:0px;
}
nav ul > li > ul li{
display:block;
}<body>
<nav>
<ul>
<li><a href="#">link</a></li>
<li class="hovered"><a href="#">link <i class="fa fa-caret-down"></i></a>
<ul>
<li><a href="#">sublink1</a></li>
<li><a href="#">sublink2</a></li>
<li><a href="#">sublink3</a></li>
<li><a href="#">sublink4</a></li>
<li><a href="#">sublink5</a></li>
<li><a href="#">sublink6</a></li>
<li><a href="#">sublink7</a></li>
<li><a href="#">sublink8</a></li>
<li><a href="#">sublink9</a></li>
<li><a href="#">sublink10</a></li>
<li><a href="#">sublink11</a></li>
<li><a href="#">sublink12</a></li>
<li><a href="#">sublink13</a></li>
<li><a href="#">sublink14</a></li>
<li><a href="#">sublink15</a></li>
<li><a href="#">sublink16</a></li>
<li><a href="#">sublink17</a></li>
<li><a href="#">sublink18</a></li>
<li><a href="#">sublink19</a></li>
<li><a href="#">sublink20</a></li>
<li><a href="#">sublink21</a></li>
<li><a href="#">sublink22</a></li>
<li><a href="#">sublink23</a></li>
<li><a href="#">sublink24</a></li>
<li><a href="#">sublink25</a></li>
<li><a href="#">sublink26</a></li>
<li><a href="#">sublink27</a></li>
<li><a href="#">sublink28</a></li>
<li><a href="#">sublink29</a></li>
<li><a href="#">sublink30</a></li>
<li><a href="#">sublink31</a></li>
<li><a href="#">sublink32</a></li>
<li><a href="#">sublink33</a></li>
</ul>
</li>
</ul>
</nav>
<section class="p1"></section>
<section class="p2"></section>
<section class="p3"></section>
<section class="p4"></section>
<section class="p5"></section>
<section class="p6"></section>
</body>これはフィドルです：それはオーバーフローに制限を打つことができるように
https://jsfiddle.net/3ewatm9d/3/