@zeni1agent

Почему анимация перестает быть плавной если указать %?

Я пытаюсь сделать выдвижное меню

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

}


.menu ul li {
background:#000;
height: 0px;

transition:0.5s;
}

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

height: 100px;
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>


но по неизвестным мне причинам когда я указываю % то transition:0.5s; перестает работать при указаний px все что находится в под категорий 2.1 не раздвигает меню а просто накладывается друг на друга.
  • Вопрос задан
  • 40 просмотров
Пригласить эксперта
Ответы на вопрос 1
@igumenov
Height анимируется только если есть фиксированы размеры.
Height 0 вообще убрать
Нужно переделать так:

Ul li
Max-height: 0;

:hover
Max-height:99999px
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
28 нояб. 2024, в 21:25
5000 руб./за проект
28 нояб. 2024, в 18:46
3000 руб./за проект
28 нояб. 2024, в 17:46
10000 руб./за проект