子子菜单不出现 [英] Sub-Sub-Menus do not appear

问题描述

使用以下代码，我创建了一个固定的< header> ，其中包括一个< image> 和一个<导航> 。到目前为止，所有这些方法都可以正常运行。

With the below code I created a fixed <header> consisting of an <image> and a <navigation>. All this works perfectly so far.

现在，我想在<$ c中插入子子菜单 $ c><导航> ，如您在 HTML 中看到的：

Now I want to insert sub-sub-menus into the <navigation> as you can see in the HTML under:

1.3.1

1.3.2

1.3.3

1.3.1
1.3.2
1.3.3

2.2.1

2.2.2

2.2.3

2.2.1
2.2.2
2.2.3

我希望那些子菜单出现在下一个转到其按钮。
但是，在我当前的代码中它们根本不会出现。

I want those sub-sub-menus to appear right next to their button. However, in my current code they do not appear at all.

我必须更改什么，因此子子项菜单在其按钮上显示右下？

What do I have to change so the sub-sub-menus appear right next to their button?

您还可以在此处找到我的代码。

You can also find my code here.

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 10%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.image {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.navigation {
  width: 70%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.navigation>ul {
  height: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
}

.navigation>ul>li {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.content {
  width: 80%;
  margin-top: 10%;
  margin-left: 10%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}

.button_01, .button_02 {
 position: relative;
}

.SlideItem_01, .SlideItem_02 {
  max-height:0px;
  overflow:hidden;
  transition: max-height .5s linear;
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: lime;
}

.button_01:hover .SlideItem_01 {
  max-height: 100px;
}

.button_02:hover .SlideItem_02 {
  max-height: 100px;
}

.SlideItem_01 li, .SlideItem_02 li  {
 display: block;
}

.SlideItem_02 {
 width: 100%;
 position: absolute;
 left: 100%;
 top: 0;
 padding:0;
 }

<div class="header">	

      <div class="image">
      Image
      </div>
  
      <nav class="navigation"> 
      
        <ul>
        
          <li class="button_01"> 1.0 Main Menu 
            <ul class="SlideItem_01">
              <li> 1.1 Sub Menu </li>
              <li> 1.2 Sub Menu </li>
              <li class="button_02"> 1.3 Sub Menu     
                 <ul class="SlideItem_02">
                  <li> 1.3.1 Sub Menu </li>
                  <li> 1.3.2 Sub Menu </li>
                  <li> 1.3.3 Sub Menu </li>
                 </ul>
              </li> 
            </ul>
          </li>
          
          <li class="button_01"> 2.0 Main Menu 
            <ul class="SlideItem_01">
              <li> 2.1 Sub Menu </li>
              <li class="button_02"> 2.2 Sub Menu     
                 <ul class="SlideItem_02">
                  <li> 2.2.1 Sub Menu </li>
                  <li> 2.2.2 Sub Menu </li>
                  <li> 2.2.3 Sub Menu </li>
                 </ul>
              </li> 
            </ul>
          </li>

          <li> 3.0 Main Menu </li>
          
        </ul>
        
      </nav>
      
</div>	

推荐答案

三级菜单由于 overflow：hidden; 在 ul 中而被隐藏，所以我将其删除并添加 opacity

Third level menu hidden because of the overflow:hidden; in ul , So I just remove it and add opacity

body {
  margin: 0;
}

.header {
  width: 80%;
  height: 10%;
  margin-left: 10%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: yellow;
}

.image {
  width: 30%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.navigation {
  width: 70%;
  height: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.navigation>ul {
  height: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: blue;
}

.navigation>ul>li {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.content {
  width: 80%;
  margin-top: 10%;
  margin-left: 10%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: red;
}

.button_01, .button_02 {
 position: relative;
}

.SlideItem_01, .SlideItem_02 {
  max-height:0;
  /*overflow:hidden;*/
  opacity: 0;
  transition: max-height .5s linear, opacity .5s linear;
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: lime;
}

.button_01:hover .SlideItem_01 {
  max-height: 100px;
  opacity:1;
}

.button_02:hover .SlideItem_02 {
  max-height: 100px;
   opacity:1;
}

.SlideItem_01 li, .SlideItem_02 li  {
 display: block;
}

.SlideItem_02 {
 width: 100%;
 position: absolute;
 left: 100%;
 top: 0;
 padding:0;
 }

<div class="header">
    <div class="image">
    Image
    </div>
    <nav class="navigation"> 
      <ul>
        <li class="button_01"> 1.0 Main Menu 
          <ul class="SlideItem_01">
            <li> 1.1 Sub Menu </li>
            <li> 1.2 Sub Menu </li>
            <li class="button_02"> 1.3 Sub Menu     
               <ul class="SlideItem_02">
                <li> 1.3.1 Sub Menu </li>
                <li> 1.3.2 Sub Menu </li>
                <li> 1.3.3 Sub Menu </li>
               </ul>
            </li> 
          </ul>
        </li>

        <li class="button_01"> 2.0 Main Menu 
          <ul class="SlideItem_01">
            <li> 2.1 Sub Menu </li>
            <li class="button_02"> 2.2 Sub Menu     
               <ul class="SlideItem_02">
                <li> 2.2.1 Sub Menu </li>
                <li> 2.2.2 Sub Menu </li>
                <li> 2.2.3 Sub Menu </li>
               </ul>
            </li> 
          </ul>
        </li>
        <li> 3.0 Main Menu </li>
      </ul>
    </nav>
</div>

这篇关于子子菜单不出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！