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

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

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

• 显示-Flex非常灵活（知道吗？）。您可以更改显示方向，以显示为列而不是行，这样可以在这种情况下更轻松地响应式布局。
• 填充和边框-我将这些规则移至a标记内的li标记，因为我希望li只负责用于显示行为。另外，由于您有很多嵌套的li，因此不使用这些规则更有意义，因为您将获得更多的填充和边框。
• 缩进-有一个名为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：

您可以考虑通过移动优先方式进行样式设置。它将使您的代码更易于管理。