下拉菜单的 CSS 转换不起作用

Question

我有以下两级菜单:

 <ul class="mid-nav-top-ul">

            <li class="mid-nav-top-li"><a class="mid-nav-top-a">Trading News</a>
                <ul class="mid-nav-two-ul">
                    <li class="mid-nav-two-li"><a class="mid-nav-two-a" href="#">Articles</a></li>
                    <li class="mid-nav-two-li"><a class="mid-nav-two-a" href="#">Stocks</a></li>
                    <li class="mid-nav-two-li"><a class="mid-nav-two-a" href="#">Forex</a></li>
                    <li class="mid-nav-two-li"><a class="mid-nav-two-a" href="#">Commodities</a></li>
                    <li class="mid-nav-two-li"><a class="mid-nav-two-a" href="#">Options</a></li>
                </ul>
            </li>

        </ul>

我有以下 CSS 使其成为下拉式菜单:

.mid-nav-two-ul{height: 0px; -webkit-transition: height 0.5s;  transition: height 0.5s;}
.mid-nav-top-ul:hover .mid-nav-two-ul{height: auto;}

它不考虑过渡 - 它会立即下降/改变高度。

有什么想法吗？

谢谢

Answer 1

首先，设置菜单 ul 的高度不一定会影响可见内容。如果溢出设置为hidden，例如overflow: hidden; 那么高度的变化会影响里面的内容，因为我们会理解如何处理“溢出”的内容。

其次，我们不能直接为 height 属性设置动画，您必须使用 max-height。然后，您可以将 max-height 设置为某个任意值，该值保证高于您的 ul 列表。

这是工作代码:

.mid-nav-two-ul
{
    max-height: 0px;
    overflow: hidden;
    -webkit-transition: max-height 0.5s; 
    transition: max-height 0.5s;

}

.mid-nav-top-ul:hover .mid-nav-two-ul
{
    max-height: 1000px;
}

Here's a working JSFiddle for you.