如果在下拉菜单中指定%，为什么动画会停止平滑

Question

我正在尝试制作一个滑动菜单

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>

但由于我不知道的原因，当我指定%时，转换：0.5s；指定px时，它将停止工作。子类别2.1中的所有内容都不会推送菜单，而是简单地相互重叠。我想尽一切办法移动这个菜单。和浮动，位置。

Answer 1

我们不能使用height:100%进行转换，但如果您知道px中的元素height，则可以使用例如：height:200px。否则希望它能帮助你：

.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

因为什么是100%高度？在这种情况下，您需要具体说明。也许你可以试试tranform: scale(1 0);到transform: scale(1 1);的动画。