css - 如果在下拉菜单中指定 %,为什么动画不再流畅?
问题描述
我正在尝试制作滑动菜单
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>
但由于我不知道的原因,当我指定% then transition: 0.5s; 指定 px 时它停止工作。子类别 2.1 中的所有内容都不会推送菜单,而只是相互重叠。我已经尝试了各种方式来移动这个菜单。和浮动,位置。
解决方案
我们不能height:100%
用于过渡,但如果您知道其中的元素height
,px
您可以使用例如: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;
}
推荐阅读
- r - 如何在R中找到图形的色数?
- c - 如何在 C 中扫描单个字符?
- flutter - 仅在视频播放完毕时启用按钮 - Flutter
- css - 我如何在网格离子中显示我的图像
- python - to_json() 函数错误地导出了带有 float64 的 Pandas 数据框
- docker - 在 Visual Studio Code 中使用 Docker 和 WSL 2 进行开发 - -sh: code: not found
- php - 无法连接数据库,其显示连接失败SQLSTATE [HY000] [1044] 用户'@'localhost'对数据库'ecom'的访问被拒绝
- oauth-2.0 - Open ID Connect 导致 SSO 采用混乱?
- vb.net - VB.NET 如果没有选中单选按钮,如何显示消息框?
- swift - 尽管在项目中识别了类,但核心数据没有找到生成的托管类