1

I made Drop down using HTML+CSS, I added also transition to make it smooth However the drop down menu just shows instantly and the CSS Code doesn't affect it in any way!

This is my code:

.dropdown {
    position: relative;
    display: inline-block;
  }
  
 .dropdown-content {
    display: none;
    visibility:hidden;
    opacity:0;
    position: absolute;
    font-size:14px;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    text-align:left;
    border-radius: 6px;
    transition:0.5s;
  }

.dropdown a{
  color: black;
  display:block;
  padding:10px 0px 10px 0px;
  text-decoration: none;
  font-size:16px;
}

.dropdown:hover .dropdown-content {
    display: block;
    visibility:visible;
    opacity:1;

}
<div class="dropdown">
            <li><a href="#" class="eng-flag">EN</a></li>
            <div class="dropdown-content" >
            <a href="#" class="eng-flag">English</a>
            <a href="#" class="gr-flag">Greek</a>
        </div>
    </div>
Md. Abu Sayed
  • 2,396
  • 2
  • 18
  • 26
hareth alamer
  • 13
  • 2

1 Answers1

1

Remove display: none from .dropdown-content check below

.dropdown {
    position: relative;
    display: inline-block;
  }
  
 .dropdown-content {
    visibility:hidden;
    opacity:0;
    position: absolute;
    font-size:14px;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    text-align:left;
    border-radius: 6px;
    transition:0.5s;
  }

.dropdown a{
  color: black;
  display:block;
  padding:10px 0px 10px 0px;
  text-decoration: none;
  font-size:16px;
}

.dropdown:hover .dropdown-content {
    display: block;
    visibility:visible;
    opacity:1;

}
<div class="dropdown">
        <li><a href="#" class="eng-flag">EN</a></li>
        <div class="dropdown-content" >
        <a href="#" class="eng-flag">English</a>
        <a href="#" class="gr-flag">Greek</a>
    </div>
</div>
Aman
  • 1,502
  • 1
  • 8
  • 13