I can't get a transition effect inside a dropdown to work

Question

I'm trying to transition effect for my menu's dropdown, but unlike the other cases, I can't manage to get it work. I've search lots of theards around here and over google as well. I found no solution.

Here's my code:

.dropdown2 {
    position: relative;
    display: inline-block;
}

.dropdown-content2 {
    display: none;
    position: absolute;
    background-color: #e1e1e1;
    color: #000;
    min-width: 150px;
    height: 220px;
    z-index: 999;
    font-size: 20px;
    margin-right: -10px;
    top: 34px;
    transition: height 2s;
}

.dropdown-content2 a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-bottom: 5px solid white;
}

.dropdown2:hover .dropdown-content2 {
    display: block;
}


.dropdown2:hover .dropbtn2 {
    background-color: #e1e1e1;
}

HTML:

                <div class="menu_option dropdown2"><a href="?go=articles">articles</a>
                    <div class="dropdown-content2">
                        <a href="?go=news">news</a>
                        <a href="?go=reviews">reviews</a>
                        <a href="?go=guides">guides</a>
                        <a href="?go=art">art</a>
                    </div>
                </div>

And it doesn't work.

Can you provide a working example that showcase your current problem? — Toan Lu, Nov 20 '19 at 10:43

Ranjith v · Answer 1 · 2019-11-20T10:53:27.783

0

try like this.. in display none and block transition effect not working.. so now i changed opacity

HTML

   <div class="menu_option dropdown2"><a href="?go=כתבות">כל הכתבות</a>
                    <div class="dropdown-content2">
                        <a href="?go=news">news</a>
                        <a href="?go=reviews">reviews</a>
                        <a href="?go=guides">guides</a>
                        <a href="?go=art">art</a>
                    </div>
                </div>

css

.dropdown2 {
    position: relative;
    display: inline-block;
}

.dropdown-content2 {
   opacity:0;
   visibility:hidden;
    position: absolute;
    background-color: #e1e1e1;
    color: #000;
    min-width: 150px;
    height: 220px;
    z-index: 999;
    font-size: 20px;
    margin-right: -10px;
    top: 34px;
    -webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease
}

.dropdown-content2 a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-bottom: 5px solid white;
}

.dropdown2:hover .dropdown-content2 {
    opacity:1;
   visibility:visible;
    -webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease
}


.dropdown2:hover .dropbtn2 {
    background-color: #e1e1e1;
}

edited Nov 20 '19 at 10:53

answered Nov 20 '19 at 10:42

Ranjith v

1,032
5
15

I tried, it doesn't work as well. :( also, I would like to know where i'm wrong please. – Ori R Nov 20 '19 at 10:47
pls share working example.. here css all are fine.. you try to add hover:transition: height 2s;.. i changed code again.. pls check now – Ranjith v Nov 20 '19 at 10:48
I've have added some info into my original post now – Ori R Nov 20 '19 at 10:50
Still doesn't work :( – Ori R Nov 20 '19 at 10:52
pls check now.. if you use display:none and block transition effect not work – Ranjith v Nov 20 '19 at 10:54
Now it works! thank you! where were I go wrong? – Ori R Nov 20 '19 at 10:56
your code is correct.. when you use display none for submenus after hover block the content transition effect not work – Ranjith v Nov 20 '19 at 10:58
Noted. thank you so much! – Ori R Nov 20 '19 at 10:59
cool.. welcome :-) – Ranjith v Nov 20 '19 at 11:00

score 0 · Answer 2 · answered Nov 20 '19 at 11:02

You can't transition from display: none to display: block.

Fortunately, in this case you don't need to. You only need to transition from height: 0 to height: 220px.

N.B. You also need to ensure that .dropdown-content2 has the style overflow: hidden to ensure that when the content of the parent element exceeds the height, it does not overflow the boundaries and reveal itself.

Working Example:

.dropdown2 {
    position: relative;
    display: inline-block;
}

.dropdown-content2 {
    position: absolute;
    background-color: #e1e1e1;
    color: #000;
    min-width: 150px;
    z-index: 999;
    font-size: 20px;
    margin-right: -10px;
    top: 34px;
    overflow: hidden;
}

.dropdown-content2 a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-bottom: 5px solid white;
}

.dropdown2 .dropdown-content2 {
    height: 0;
    transition: height 2s;
}

.dropdown2:hover .dropdown-content2 {
    height: 220px;
}


.dropdown2:hover .dropbtn2 {
    background-color: #e1e1e1;
}

<div class="menu_option dropdown2"><a href="?go=articles">articles</a>
<div class="dropdown-content2">
<a href="?go=news">news</a>
<a href="?go=reviews">reviews</a>
<a href="?go=guides">guides</a>
<a href="?go=art">art</a>
</div>
</div>

Good to know. thank you very much for pointing my mistake and help me :) — Ori R, Nov 20 '19 at 11:06
Please upvote and accept if the answer above resolves your issue. Thanks. — Rounin, Nov 20 '19 at 11:08

I can't get a transition effect inside a dropdown to work

2 Answers2