Question

我希望我的移动视图上的子菜单像this一样工作，但是如果您进入移动视图并单击“服务”选项卡，它不会像this那样打开。如果删除位置：静态；在@media only屏幕和（最大宽度：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随着下拉列表的扩展而向下移动并解决问题。希望这会有所帮助。

为什么移动菜单中的子菜单位于菜单顶部而不是向下推菜单？

1 个答案: