Vertikaler Bildlauf im Untermenü funktioniert nicht

Question

Ich habe ein Problem. Ich habe Menü-Navigation vor Ort und auch Untermenü (Dropdown). Wenn ich meine Website auf dem mobilen Gerät öffne, öffne das Hauptmenü und klicke auf das Untermenü, dann kann ich nicht runterscrollen, um alle Untermenüs zu sehen, obwohl ich sehe, dass sich die Schriftrolle bewegt, aber nichts passiert

Mein CSS-Code:

.mobile-nav .smr-res-nav li { 
 
    margin: 5px 0; 
 
    list-style: none; 
 
    display: block; 
 
    max-width: 200px; 
 
    position: relative; 
 
} 
 

 
.mobile-nav .smr-res-nav li a { 
 
    font-size: 20px; 
 
    color: #FFF; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
} 
 

 
.site-navigation-wrapper { 
 
    float: left; 
 
    width: 100%; 
 
    display: block; 
 
    position: relative; 
 

 
} 
 
.main-navigation { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 
.main-navigation > ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: inline-block; 
 
} 
 
.main-navigation li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    position: relative; 
 
} 
 
.main-navigation li:after { 
 
    content: ""; 
 
    background: #ff5050; 
 
    width: 100%; 
 
    bottom: -2px; 
 
    left: 0; 
 
    display: block; 
 
    height: 3px; 
 
    position: absolute; 
 
    visibility: hidden; 
 
    -webkit-transform: scaleX(0); 
 
    transform: scaleX(0); 
 
    -webkit-transition: all 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
    -moz-transition: all 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
    -ms-transition: all 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
    -o-transition: all 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
    transition: all 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
} 
 
.main-navigation .smr-main-nav > .current-menu-item:after, 
 
.main-navigation .smr-main-nav > li:hover:after, 
 
.main-navigation .smr-main-nav ul > li:hover:after { 
 
    visibility: visible; 
 
    -webkit-transform: scaleX(1); 
 
    transform: scaleX(1); 
 
} 
 
.main-navigation a { 
 
    font-size: 13px; 
 
    color: #484848 !important; 
 
    
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    padding: 5px; 
 
    -webkit-transition: all 0.1s ease-in-out; 
 
    -moz-transition: all 0.1s ease-in-out; 
 
    -ms-transition: all 0.1s ease-in-out; 
 
    -o-transition: all 0.1s ease-in-out; 
 
    transition: all 0.1s ease-in-out; 
 
} 
 
.main-navigation ul ul { 
 
    background: #ffffff; 
 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
 
    float: left; 
 
    position: absolute; 
 
    top: 103%; 
 
    left: -999em; 
 
    z-index: 99999; 
 
    padding: 0; 
 
    text-align: left; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
    -moz-transition: opacity 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
    -ms-transition: opacity 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
    -o-transition: opacity 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
transition: opacity 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
} 
 
.main-navigation ul ul li { 
 
    padding: 0 0 0 20px; 
 
} 
 
.main-navigation ul ul ul { 
 
    left: -999em; 
 
    top: 0; 
 
} 
 
.main-navigation ul ul a { 
 
    width: 200px; 
 
} 
 
.main-navigation ul li:hover > ul, 
 
.main-navigation ul li.focus > ul { 
 
    left: 0; 
 
    opacity: 1; 
 
} 
 
.main-navigation ul ul li:hover > ul, 
 
.main-navigation ul ul li.focus > ul { 
 
    left: 100%; 
 
} 
 
.main-navigation .sub-menu li:first-child a { 
 
    padding: 10px 0 5px; 
 
} 
 
.main-navigation .sub-menu li:last-child a { 
 
    padding: 5px 0 10px; 
 
} 
 
.main-navigation .sub-menu a { 
 
    padding: 5px 0 5px; 
 
} 
 
.main-navigation .menu-item-has-children > a:after { 
 
    font-family: "FontAwesome"; 
 
    content: "\f107"; 
 
    margin-left: 5px; 
 
} 
 
.main-navigation .sub-menu .menu-item-has-children > a:after { 
 
    font-family: "FontAwesome"; 
 
    content: "\f105"; 
 
    margin-right: 20px; 
 
    float: right; 
 
    }

<nav id="site-navigation" class="main-navigation" role="navigation"> 
 
    <ul id="smr-main-nav" class="smr-main-nav"> 
 
    <li id="menu- 
 
    item-21" class="menu-item menu-item-type-post_type menu-item-object-page 
 
    menu-item-home current-menu-item page_item page-item-2 current_page_item 
 
    menu-item-21"><a href="#">MAINMENU</a></li> 
 
    <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-22"><a href="#">MAINMENU</a></li> 
 
    <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-23"><a href="#">MAINMENU</a></li> 
 
    <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-24"><a href="#">MAINMENU</a></li> 
 
    <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-25"><a href="#">MAINMENU</a></li> 
 
    <li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-247"><a href="#">MAINMENU</a></li> 
 
    <li id="menu-item-207" class="menu-item menu-item-type-custom menu-item- 
 
    object-custom menu-item-has-children menu-item-207"><a href="#">MAINMENU</a> 
 
     <ul class="sub-menu"> 
 
     <li id="menu-item-176" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-176"><a href="#">SUBMENU</a></li> 
 
     <li id="menu-item-195" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-195"><a href="#">SUBMENU</a></li> 
 
     <li id="menu-item-198" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-198"><a href="#">SUBMENU</a></li> 
 
     <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-165"><a href="#">SUBMENU</a></li> 
 
     <li id="menu-item-313" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-313"><a href="#">SUBMENU</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

versuchen Sie, -webkit-overflow-scrolling: touch;

Wir setzen den Überlauf-Spiral der Berührung für Dynamik zu ermöglichen, in mobilen Geräten zu scrollen. Im Folgenden näher erklärt:

Die Einstellung Auto funktioniert auf einigen Geräten, aber stellen Sie dies zum Scrollen nur um sicher zu sein. Dies ist die magische Eigenschaft, die das Scrolling des ursprünglichen Gefühls ermöglicht. Wenn Sie diese Einstellung festlegen, werden gleichmäßig große Zeilen erstellt, was die Arbeit am Rand erschwert. Sie müssen die Breite auf einen Wert festlegen, der größer ist als die Summe aller li-Breiten.