Why does the animation cease to be smooth if you specify % in the pull-down menu?

Question

I'm trying to make a sliding menu

CSS

.menu li ul  {
    position: static;   
  background:#6b522e;
  max-width: 200px;
  display: block;
  overflow: hidden;

}







.menu   ul   li  {
      background:#e32929;

      height: 0px;
       transition:0.5s;
}



.menu :hover > ul > li  {
      background:#e32929;

      height: 100%;
       transition:0.5s;
}

HTML

   <nav role="navigation" class="navigation site-navigation secondary-navigation">
    <div class="menu-%d0%b1%d0%be%d0%ba%d0%b8-container"><ul id="menu-%d0%b1%d0%be%d0%ba%d0%b8" class="menu"><li id="menu-item-1278" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1278"><a href="#">Категория 1</a>
<ul class="sub-menu">
  <li id="menu-item-1283" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1283"><a href="#">Под категория 1.1</a></li>
  <li id="menu-item-1282" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1282"><a href="#">Под категория 1.2</a></li>
</ul>
</li>
<li id="menu-item-1277" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1277"><a href="#">Категория 2</a>
<ul class="sub-menu">
  <li id="menu-item-1281" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1281"><a href="#">Под категория 2.1</a>
  <ul class="sub-menu">
    <li id="menu-item-1280" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1280"><a href="#">Под категория 2.1.1</a>
    <ul class="sub-menu">
      <li id="menu-item-1286" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-has-children menu-item-1286"><a href="#">Под категория 2.1.1.1</a>
      <ul class="sub-menu">
        <li id="menu-item-1287" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1287"><a href="#">НАЙДИ МЕНЯ!!</a></li>
      </ul>
</li>
    </ul>
</li>
  </ul>
</li>
  <li id="menu-item-1279" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1279"><a href="#">Под категория 2.2</a></li>
</ul>
</li>
</ul></div> </nav>

but for reasons unknown to me when I specify% then transition: 0.5s; it stops working when specifying px. Everything that is in sub categories 2.1 does not push the menu, but simply overlaps each other. I have tried in every way to move this menu. and float, position.

Answer 1

we cannot use height:100% for transition but if you know element height in px you can use for ex: height:200px. otherwise hope it help you:

.menu li ul  {
  position: static;   
  background:#6b522e;
  max-width: 200px;
  display: block;
  overflow: hidden;

}
.menu   ul   li  {
      background:#e32929;
      transition:max-height 1s linear ;
      max-height: 0px;
      height: 0;
}
.menu :hover > ul > li  {
      background:#e32929;
      height: 100%;
      max-height: 100px;
}

Answer 2

Because what is 100% height? You need to be specific in this case. Maybe you can try animation by tranform: scale(1 0); to transform: scale(1 1);.