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.

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

1 个答案: