简单的下拉菜单——悬停时的过渡

Question

我有一个带有子菜单的简单下拉菜单，我想在鼠标悬停时向下滑动而不是 "pop out"，并带有过渡属性:

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

简单的下拉菜单——悬停时的过渡

Simple dropdown menu – transition on hover

html

css

css-transitions

drop-down-menu