CODEWITHSUNDEEP
htmlcssdrop-down-menucss-transitions
reivon
reivon

Reputation: 33

Simple dropdown menu – transition on hover

I have a simple dropdown menu with a submenu I would like to slide down instead of "pop out" on hover with a transition property:

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>

The problem is, I absolutely have no idea where to place the transition properties and what is missing to make it work properly.

Upvotes: 3

Views: 8977

Answers (1)

sergdenisov
sergdenisov

Reputation: 8572

The simplest way you could do it with CSS only — using 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>

Upvotes: 3

Related Questions