首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >子菜单中的垂直滚动不起作用

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

Stack Overflow用户
提问于 2017-06-15 00:37:56
回答 0查看 672关注 0票数 0

我有个问题。我在网站上有菜单导航,也有子菜单(下拉)。如果我在移动设备上打开我的网站,然后打开主菜单并单击子菜单,那么我无法向下滚动,以查看我所有的子菜单项,虽然我看到滚动正在移动,但没有任何反应

我的css代码:

代码语言:javascript
代码运行次数:0
运行
复制
.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;
     }
代码语言:javascript
代码运行次数:0
运行
复制
<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>

EN

回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/44550280

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档