html - 为什么移动设备中的子菜单在菜单顶部打开而不是将菜单向下推？

Question

我希望我的移动 View 子菜单像this 一样工作但相反，如果您进入移动 View 并单击服务选项卡，它不会打开，如 this .如果删除位置:静态；在@media only screen and (max-width: 798px)

.nav-dropdown {
    position: static; */
}

它会显示子菜单“网页设计”，但它只是位于菜单的顶部，而不是像在我尝试使用的导航中那样将其向下推并适配。这是我的代码:

<ul class="nav-list">
  <li>
    <a href="/">Home</a>
  </li>
  <li>
    <a href="/#about">About</a>
  </li>
  <li>
    <a href="#!">Services</a>
      <ul class="nav-dropdown">
  <li>
    <a href="/web-design">Web Design</a>
  </li>
  <!--<li>-->
  <!--    <a href="#!">Web Development</a>-->
  <!--</li>-->
  <!--<li>-->
  <!--    <a href="#!">Graphic Design</a>-->
  <!--</li>-->
</ul>

CSS:

@media only screen and (max-width: 798px) {


.nav-mobile {
    display: block;
  }

  nav {
    width: 100%;
    padding: 50px 0 15px;
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
  }
  nav ul li a {
    padding: 15px;
    line-height: 20px;
  }
  nav ul li ul li a {
    padding-left: 30px;
  }

  .nav-dropdown {
    position: static;
  }
}

Answer 1

nav ul li {
height: 50px;
}

如果您在移动媒体查询中将此更改为，则为每个 li 提供 50 像素的硬高度:

nav ul li {
height: inherit;
}

它应该允许 li 在下拉列表扩展时向下移动并解决问题。希望这会有所帮助。