0
我遇到問題。 我有網站上的菜單導航和子菜單（下拉菜單）。如果我在移動設備上打開我的網站，然後打開主菜單並單擊子菜單，然後我無法向下滾動，查看我的所有子菜單項，儘管我看到滾動正在移動，但沒有任何反應子菜單中的垂直滾動不起作用
我的CSS代碼：
.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>
你能發佈一些html代碼嗎？或者在https://www.jsfiddle.net上小提琴？ –
是的，當然。添加到我的第一篇文章 –
不夠css ..請多加 –