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

Question

我有一个简单的下拉菜单，其中有一个子菜单，我想向下滑动，而不是在悬停时"弹出"，具有转换属性：

JSFiddle

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

问题是，我完全不知道将转换属性放在哪里，也不知道缺少什么才能使其正常工作。

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