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

Stack Overflow用户

提问于 2017-06-14 16:37:56

回答 0查看 672关注 0票数 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>