css 我怎样才能使它成为一个包含嵌套元素的多级导航栏？

我的网站上有一个汉堡包菜单，我想给它添加一些多级功能。它横跨整个页面的宽度，单击汉堡包按钮会展开一个直接位于它下面的链接下拉列表。我希望其中一些链接也有自己的下拉列表。我无法使嵌套的下拉列表正确显示。我如何向下拉列表添加嵌套的链接？
如下所示：

链接1
链接2
链接A
链接B
链接C
链接3

下面是我目前的相关代码.提前感谢任何和所有的帮助.

<section class="top-nav">
  <div></div>
  <input id="menu-toggle" type="checkbox" />
  <label class='menu-button-container' for="menu-toggle">
    <div class='menu-button'></div>
    <span style="position: absolute; margin-left: 5em; font-size: 1.5em;">MENU</span>
  </label>
  <a>Login</a>
  <ul class="menu">
    <li><a>Link 1</a></li>
    <li><a>Link 2</a></li>
    <li><a>Link 3</a></li>
  </ul>
</section>

.top-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(0, 0, 0, 0.5);
  color: #FFF;
  height: 5em;
  padding: 1em;
}

.menu {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  z-index: 99;
  margin-top: 5em;
}

.menu > li {
  overflow: hidden;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0.5em 0;
  width: 100%;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);;
}

.menu-button-container {
  display: flex;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: -19em;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #fff;
  position: absolute;
  height: 0.2em;
  width: 2em;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2em;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

#menu-toggle ~ .menu li {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
#menu-toggle:checked ~ .menu li {
  height: 2.5em;
  padding: 0.5em;
  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

编辑：我更新了我的HTML代码，因为我意识到它在CodePen中粘贴时无法正常工作。它仍然与我在实际网页上的内容不完全匹配，但我认为它足以证明我的意思。

欢迎，杰瑞：我希望你发现stackoverflow对你来说更受欢迎，更有信息。
我不太明白你到底想要什么，如果你使用一个codepen空间来向我们展示一个使用https://pen.new的演示，那会很有帮助。
所以为了实现层次形状我们使用了一个技巧ul li li ul li li ul li
我希望你能理解我所指的，所以代码将是这样的：

<ul> 
  <li> Hello </li>
  <li> Hello </li>
  <li > Title </li>
  <ul > 
    <li> Hello2 </li> 
    <li> Hello2 </li> 
    <li> Hello2 </li> 
    <ul> <li> Hello3 </li> 
      <li> Hello3 </li> 
      <li> Hello3 </li> 
    </ul> </ul> 
  <li> Hello </li> 
  <li> Hello </li> 
  <li> Hello </li> 
</ul>

为了使他们的每一个标题下拉本身，你可以实现，我们要隐藏所有的孩子，只显示他们，如果标题已经悬停或自己已经悬停.一个工作的例子将被发现here希望它有帮助：D

css 我怎样才能使它成为一个包含嵌套元素的多级导航栏？

1条答案

相关问题

热门标签

最新问答