简单下拉菜单-悬停过渡
简单下拉菜单-悬停过渡
提问于 2015-11-15 12:38:17
我有一个简单的下拉菜单和一个子菜单，我想要向下滑动，而不是“弹出”在鼠标悬停与一个过渡属性：
.navbar ul > li {
list-style-type: none;
}
.navbar ul ul {
display: none;
}
.navbar ul li:hover > ul {
display: block;
-webkit-transition:height 200ms ease-in;
-moz-transition:height 200ms ease-in;
-o-transition:height 200ms ease-in;
transition:height 200ms ease-in;
}<div class="navbar">
<ul>
<li>
<a href="#">Network</a>
</li>
<li>
<a href="#">About us</a>
</li>
<li>
<a href="#">Membership</a>
</li>
<li>
<a href="#">Members</a>
<ul>
<li><a href="medlemmer.html">What's up?</a></li>
<li><a href="#">Guests</a></li>
</ul>
</li>
<li>
<a href="#">Contact (connecting us)</a>
</li>
</ul>
</div>
问题是，我完全不知道在哪里放置转换属性，以及缺少什么来使其正常工作。
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-11-15 12:51:23
使用CSS最简单的方法就是使用max-height。
.navbar ul > li {
list-style-type: none;
}
.navbar ul ul {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.2s ease-in;
transition: max-height 0.2s ease-in;
}
.navbar ul li:hover > ul {
max-height: 100px;
}<div class="navbar">
<ul>
<li>
<a href="#">Network</a>
</li>
<li>
<a href="#">About us</a>
</li>
<li>
<a href="#">Membership</a>
</li>
<li>
<a href="#">Members</a>
<ul>
<li><a href="medlemmer.html">What's up?</a></li>
<li><a href="#">Guests</a></li>
</ul>
</li>
<li>
<a href="#">Contact (connecting us)</a>
</li>
</ul>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33719741
复制相关文章
相似问题
腾讯云开发者
