Sub-sub-menus Do Not Appear

With the below code I created a fixed

consisting of an and a . All this works perfectly so far. Now I want to insert sub-sub-menus in

Solution 1:

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_01li, .SlideItem_02li  {
 display: block;
}

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

<divclass="header"><divclass="image">
    Image
    </div><navclass="navigation"><ul><liclass="button_01"> 1.0 Main Menu 
          <ulclass="SlideItem_01"><li> 1.1 Sub Menu </li><li> 1.2 Sub Menu </li><liclass="button_02"> 1.3 Sub Menu     
               <ulclass="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><liclass="button_01"> 2.0 Main Menu 
          <ulclass="SlideItem_01"><li> 2.1 Sub Menu </li><liclass="button_02"> 2.2 Sub Menu     
               <ulclass="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>