Avoid That Keyframe Animation Overflows Submenus In Navigation

I have the following HTML and CSS which you can also find in the JSfiddle here: As you can see in the comments the code is divided in two parts: Part 1: Navigation with a panel to

Solution 1:

You placed the navigation with fixed position, so if it scales it won't affect other elements in the page, the animated element in your example.

You need to place it without a fixed position. Also, you can't use scale transform since scaling it later won't affect the parent height. You can use height: 0px as the default state and height: unset once hovered.

Here's an example:

/* Header & Naviagtion */.header {
  width: 100%;
}

.navigation {
  width: 100%;
  height: 100%;
}

.button {
  width: 100%;
  background-color: purple;
}

.navigation>ul {
  height: 100%;
  width: 100%;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.panel {
  max-height: 0px;
  overflow: hidden;
  transform: scale(1, 0);
  transform-origin: top;
  transition-duration: 0.2s;
  background-color: lime;
}

.button:hover.panel {
  max-height: unset;
  transform: scale(1);
}


/* Content Animation */.parent {
  margin-top: 5%;
  height: 10%;
  width: 100%;
  float: left;
  position: relative;
}

.content1 {
  height: 100%;
  width: 100%;
  background-color: blue;
  float: left;
  position: absolute;
}

.content2 {
  height: 100%;
  width: 100%;
  background-color: red;
  float: left;
  animation-delay: 1s;
  position: absolute;
}

.content3 {
  height: 100%;
  width: 100%;
  background-color: yellow;
  float: left;
  animation-delay: 2s;
  position: absolute;
}

.content4 {
  height: 100%;
  width: 100%;
  background-color: green;
  float: left;
  animation-delay: 3s;
  position: absolute;
}

.content5 {
  height: 100%;
  width: 100%;
  background-color: lime;
  float: left;
  animation-delay: 4s;
}

.parentdiv {
  animation-name: animation_01;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes animation_01 {
  12.5% {
    opacity: 1
  }
  0%,
  25%,
  100% {
    opacity: 0
  }
}

<divclass="header"><navclass="navigation"><ul><liclass="button"> 1.0 Main Menu
        <ulclass="panel"><li> 1.1 Sub Menu </li><li> 1.2 Sub Menu </li></ul></li></ul></nav></div><divclass="parent"><divclass="content1">Here goes content1</div><divclass="content2">Here goes content2</div><divclass="content3">Here goes content3</div><divclass="content4">Here goes content4</div><divclass="content5">Here goes content5</div></div>