无法正确样式移动菜单视图中的嵌套列表

Question

我试图完成一个移动响应菜单的纯CSS，有下拉。我的问题是，我无法像你所期望的那样显示菜单的移动样式，也就是说，一个简单的列表，将每个列表项目与所有级别都分开(包括适用于子菜单的缩进)。正如您在本演示中所看到的，嵌套的ul开始时，它会从其他菜单项中筛选出来。我该怎么解决这个问题？谢谢。

演示：

​

#main-nav {
  display: flex;
  justify-content: space-between;
  margin: 20px 16px 20px 16px;
  border-bottom: 7px solid rgb(30, 30, 30);  
}


.menu-left li{
  /*display: inline-block;*/
  padding-right: 32px;
}

#main-nav a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

#main-nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

#main-nav li {
  width:100%;
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
}

#main-nav li:hover .submenu > li {
  display: block;
  top: 0px;
}

.submenu li {
  display: none;
  position: absolute;
  top: 0;
}

.submenu {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
}

.submenu li {
  position: relative;
}

.submenu li:hover .submenu-2 li {
  display: block;
}

.submenu-2 li {
  display: none;
}

.submenu-2 {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 100%;
  width: 120px;
}

.arrow {
  margin-left: 8px;
  color: rgb(88, 88, 88);
  font-size: 12px;
}

/*
Media -------------------------------------------
*/

@media all and (max-width: 768px) {
  
  #main-nav {
    display: block; 
    margin:0;
    margin-bottom: 16px;
    border-bottom: none;
    background-color: #DDD;
    border-top: 1px solid MediumTurquoise;
  }

  li:hover {
    background-color: #eee;
  }

  #main-nav a {
    display: block;
  }
  
  #main-nav ul {
    display: block;
  }

  #main-nav li {
    padding: 10px 0 10px 16px;
    border-bottom: 1px solid MediumTurquoise;
    position: static;
  }

  .nav-menu-border {
    border-bottom: none;
  }

  .submenu {
    display: block;
    position: static;
  }

  .submenu li {
    display: initial;
    position: static;
    top: auto;
  }
  
  .submenu-2 {
    display: block;
    position: static;
    top: auto;
  }

  .submenu-2 li {
    display: initial;
  }

  #main-nav li:hover .submenu > li { 
    /* reset the hover styles to disable hover effect */
    display: initial;
    top: auto;
  }

  .submenu li:hover .submenu-2 li {
    /* reset the hover styles to disable hover effect */
    display: initial;
  }

  .submenu {
    margin: 0;
    padding: 0;
  }


}

<nav id="main-nav" class="menu">

  <ul class="menu-left">
    <li><a href="#">ONE</a></li>
    <li><a href="#">TWO</a></li>
    <li>
      <a href="#" style="color:red;">THREE</a>
      <ul class="submenu">
        <li><a href="#">FOUR</a></li>
        <li><a href="#">FIVE</a></li>
        <li>
          <a href="#">SIX<span class="arrow">&#9658;</span></a>
          <ul class="submenu-2">
            <li><a href="#">SEVEN</a></li>
            <li><a href="#">EIGHT</a></li>
            <li><a href="#">NINE</a></li>
            <li><a href="#">TEN</a></li>
          </ul>
        </li>
        <li><a href="#">ELEVEN</a></li>
      </ul>
    </li>
    <li><a href="#">TWELVE</a></li>
  </ul>

  <ul class="menu-right">
    <li><a href="#">THIRTEEN</a></li>
  </ul>

</nav>

<h2>Drag the screen width slider to see the mobile menu </h2>

​

Answer 1

我不得不做很多改变。我将不详细介绍每个更改，但我将解释我所做的主要更改：

• Display - Flex非常灵活(明白吗？)您可以将显示方向更改为列，而不是一行，因此在这种情况下，它可以帮助您响应地展开布局。
• 填充和边框--我将这些规则移到li标记中的a标记中，因为我希望li只负责显示行为。另外，由于您有很多嵌套的li，所以使用这些规则更有意义，因为您将得到额外的填充和边框。
• Indention --有一条叫做text-indent的规则，它能满足你的需要。您可以使用text-indent规则，而不是从一开始就添加自定义填充，它将处理缩进。

你可以亲眼看到结果：

​

#main-nav {
  display: flex;
  justify-content: space-between;
  margin: 20px 16px 20px 16px;
  border-bottom: 7px solid rgb(30, 30, 30);  
}


.menu-left li{
  /*display: inline-block;*/
  padding-right: 32px;
}

#main-nav a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

#main-nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

#main-nav li {
  width:100%;
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
}

#main-nav li:hover .submenu > li {
  display: block;
  top: 0px;
}

.submenu li {
  display: none;
  position: absolute;
  top: 0;
}

.submenu {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
}

.submenu li {
  position: relative;
}

.submenu li:hover .submenu-2 li {
  display: block;
}

.submenu-2 li {
  display: none;
}

.submenu-2 {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 100%;
  width: 120px;
}

.arrow {
  margin-left: 8px;
  color: rgb(88, 88, 88);
  font-size: 12px;
}

/*
Media -------------------------------------------
*/

@media all and (max-width: 768px) {
  
  #main-nav {
    display: flex;
    flex-direction: column;
    margin: 0 0 16px;
    margin-bottom: 16px;
    border-bottom: none;
    background-color: #DDD;
    border-top: 1px solid MediumTurquoise;
  }

  li:hover {
    background-color: #eee;
  }

  #main-nav a {
    padding: 10px;
    border-bottom: 1px solid MediumTurquoise;
    display: block;
  }
  
  #main-nav ul {
    flex-direction: column;
  }

  #main-nav li {
    padding: 0;
    margin: 0;
    position: static;
    box-sizing: border-box;
  }

  .nav-menu-border {
    border-bottom: none;
  }

  .submenu {
    display: flex;
    flex-direction: column;
    position: static;
    text-indent: 10px
  }

  .submenu li {
    display: block;
    position: static;
  }
  
  .submenu-2 {
    display: flex;
    flex-direction: column;
    position: static;
    width: auto;
    text-indent: 20px;
  }

  .submenu-2 li {
    display: block;
  }

  .submenu {
    margin: 0;
    padding: 0;
  }


}

<nav id="main-nav" class="menu">

  <ul class="menu-left">
    <li><a href="#">ONE</a></li>
    <li><a href="#">TWO</a></li>
    <li>
      <a href="#" style="color:red;">THREE</a>
      <ul class="submenu">
        <li><a href="#">FOUR</a></li>
        <li><a href="#">FIVE</a></li>
        <li>
          <a href="#">SIX<span class="arrow">&#9658;</span></a>
          <ul class="submenu-2">
            <li><a href="#">SEVEN</a></li>
            <li><a href="#">EIGHT</a></li>
            <li><a href="#">NINE</a></li>
            <li><a href="#">TEN</a></li>
          </ul>
        </li>
        <li><a href="#">ELEVEN</a></li>
      </ul>
    </li>
    <li><a href="#">TWELVE</a></li>
  </ul>

  <ul class="menu-right">
    <li><a href="#">THIRTEEN</a></li>
  </ul>

</nav>

<h2>Drag the screen width slider to see the mobile menu </h2>

​

PS：

您可以考虑使用移动第一方法进行样式设计。它将使您的代码更易于管理。