简单的下拉菜单 - 悬停过渡答案

【问题标题】：Simple dropdown menu – transition on hover简单的下拉菜单 - 悬停过渡
【发布时间】：2016-02-16 15:04:47
【问题描述】：

我有一个简单的下拉菜单，其中包含一个子菜单，我想在悬停时使用过渡属性向下滑动而不是“弹出”：

.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>

问题是，我完全不知道在哪里放置过渡属性以及缺少什么使其正常工作。

【问题讨论】：

标签： html css drop-down-menu css-transitions

【解决方案1】：

仅使用 CSS 即可实现的最简单方法 - 使用 max-height：

JSFiddle

.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>

【讨论】：

@reivon 一点也不，我很乐意提供帮助。但是这个方案不是最好的，我推荐使用 Javascript/jQuery 方案。