0
Ich habe ein klebriges Menü für mobile Geräte erstellt. Alles ist in Ordnung, aber es gibt ein Problem in Bezug auf die Untermenüs, die aus dem Bildfenster überlaufen, und während des Scrollens wird nur der Dokumentkörper gescrollt und die versteckten Teile des Menüs bleiben außerhalb des Ansichtsfensters. Ich habe overflow:scroll für den Container verwendet, aber ich konnte es nicht beheben.Wie blättern Sie in den Untermenüs eines klebrigen und festen Menüs in mobilen Geräten
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>Dies ist die Geige:
https://jsfiddle.net/3ewatm9d/3/