简单的下拉菜单 - 悬停时转换

Question

我有一个简单的下拉菜单，其中包含一个子菜单，我想滑下来而不是＆＃34;弹出＆＃34;在悬停时使用过渡属性：

JSFiddle

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

只使用CSS的最简单方法 - 使用max-height：

JSFiddle

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;