Question

我有一个问题。我有现场菜单导航和子菜单（下拉菜单）。如果我在移动设备上打开我的网站，然后打开主菜单并单击子菜单，然后我无法向下滚动，看到我的所有子菜单项，虽然我看到滚动正在移动，但没有任何反应

我的css代码：

＆＃13;

.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;
     }

＆＃13;

<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>

＆＃13;

Answer 1

尝试添加-webkit-overflow-scrolling: touch;

我们设置了溢出滚动类型的触摸，以允许移动设备中的动量滚动。下面详细解释一下：

设置自动将在某些设备上运行，但将其设置为滚动只是为了确保。这是一个神奇的属性，使本机感觉滚动。设置这个以证明是合理的，创造了相同间隔的li，这使得解决边距变得困难。您必须将宽度设置为大于所有li宽度之和的值。

子菜单中的垂直滚动不起作用

1 个答案: