HTML/CSS Dropdown animation fails to execute

My attempt at creating a smooth drop-down menu using HTML and CSS has not gone as planned. Despite adding transitions to make it appear smooth, the drop-down menu just shows up instantly without any CSS effects taking place.

This is the code I have used:

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

Answer №1

Make sure to delete display: none from the styles for .dropdown-content as shown 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to utilize a JavaScript function to transfer several chosen values from a select listbox to a different listbox when a button is clicked?

Is it possible to create a functionality where users can select multiple values from a first list and by clicking a button, those selected values are added to a second list? How can this be achieved through JavaScript? function Add() { //function here ...

javascripthtml

Setting the title attribute for option elements in a select element that is bound to a model using AngularJs

I'm currently working on an HTML select element that is connected to an ng-model. Here's what the setup looks like: <select data-ng-model="accountType" data-ng-options="at.name for at in accountTypes"></select> This is how my accou ...

javascripthtmlangularjsangularjs-directive

Perform an Ajax request with JQuery in an HTML document and transfer the response to a different HTML page

This is my first attempt at using AJAX and jQuery to retrieve data from another HTML page. Below is the code I have written: Here is my JavaScript code: <script type="text/javascript> $(document).ready(function() { $('#submit').click( ...

javascriptjqueryhtmlajax

What is the process for transferring information from HTML to Python and then receiving the output in HTML?

I am completely unfamiliar with the connection between HTML and Python, so I am reaching out for some assistance. I hope that someone here can lend me a hand. Currently, my HTML is hosted on an Apache server, and I access the website using the address "". ...

javascriptjquerypythonhtmldjango

Eliminate the duplicate scroll bar from the block extension

I am currently working on a project where I have integrated a plotly-dash app into Django using the django-plotly-dash package. After conducting various tests and ensuring everything is functioning correctly, I noticed that a double scrollbar appears when ...

cssdjangodjango-viewsscrollbar

Conceal navigation options post selection

I have successfully created a navigation menu, but I am facing an issue where the menu remains open until the mouse moves out of the dropdown. I already have a function in place that displays content in another <div> (otherDiv) when an item is selec ...

javascripthtmlcss

Overflow scrolling container with additional space to the right of an image

I am currently working on a project that involves a specific website. When examining the main battalion image, I noticed there is an excessive 300px of whitespace on the right side that I am struggling to remove. There is no hidden content or padding caus ...

htmlcssscrolloverflow

Is there a way to style the current page's link to make it appear disabled?

On my website, there are three main pages: Home, About, and Contact. I want the link to the current page to visually indicate that clicking on it would be redundant since the user is already on that page. Should I use CSS or jQuery for this task? And what ...

javascriptjquerycsshtmlnav

Is Jquery Mobile's Table lacking responsiveness?

I have implemented a basic table from the jQuery Mobile website on my page. Take a look at the HTML code below: <div data-role="page" id="mainPage"> <div data-role="content> <table data-role="table" id="my-table" da ...

javascriptjqueryhtmlcssjquery-mobile

Is the primary color modification in Bootstrap failing to take effect?

Currently, I am working on a react app and I have successfully integrated Bootstrap React. One of the tasks I wanted to accomplish was changing the primary color from the default blue to a different shade. To do this, I navigated to bootstrap/scss/variabl ...

cssreactjsbootstrap-4

Create a selection list with Bootstrap that has a transparent background

Can you create a standard selection list with a transparent background? Below are two examples. While it's possible to create a "custom" selection list with a transparent background, is it possible to achieve the same effect using a select element? H ...

htmlcsstwitter-bootstrapbootstrap-4drop-down-menu

Minimize the styling of the input placeholder CSS

Here is the CSS I am using: #login-box ::-webkit-input-placeholder { color: #666; } #login-box :-moz-placeholder { color: #666; } #login-box ::-moz-placeholder { color: #666; } #login-box :-ms-input-placeholder { color: #666; } I attem ...

css

Changing the color of text in MySQL PHP based on the output

I have created a table displaying the availability for a project I am working on. The table is functioning correctly, but I would like to highlight the 'doctorName' field in different colors based on their availability - green if they are availab ...

phphtmlmysql

Oddly stacked masonry tiles in a horizontal layout

After spending more than an hour trying to figure it out, searching and reviewing other solutions, I still haven't been able to resolve my issue. My problem is with 5 divs, where the third and fourth div are not stacking up as expected. Instead, the ...

jqueryhtmlcssjquery-masonrymasonry

Creating a multiline textarea with ellipsis using ReactJS

Looking to create a component with a multiline textfield that displays ellipsis (...) for text overflow beyond 2 lines. How can I achieve this through CSS only without modifying the actual stored text? Utilizing the React component found at: link Appreci ...

javascriptcssreactjsecmascript-6material-ui

How to position a child element beneath its parent using CSS

Can you position a child element (C) beneath its parent (B), but above B's neighboring element (D)? Explaining this can be tricky, so feel free to check out an example here. The main question is: how do you place the blue div.inner above the red div ...

htmlcsscss-position

Is it possible to use CSS and HTML to rotate a cube and expand its sides?

I am attempting to rotate the cube and expand its faces. I have experimented with the following code: .wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .cube-wrap { width: 40px; height: 40px; ...

htmlcss

The <span> element containing "float: right" within the style of "white-space: pre"

Take a look at the code snippet below: <div style="white-space: pre"> long time; <span style="float: right;">// know C?</span> </div> When this HTML is rendered, WebKit and Gecko produce different results. In WebKit, the conte ...

htmlcssword-wrap

Ensuring the model accurately reflects the input's value attribute in AngularJS

I am in the process of creating a set of image "radio buttons" where only one can be selected per group. However, as a newcomer to Angular, I'm facing difficulties in maintaining the value and using it as my ng-model. Additionally, I am looking for a ...

javascripthtmlcssangularjs

The continual appearance of "No file found" persists when utilizing the $redirectRoute

My goal is to make one of the links on my website lead to another page within the site. Below is one of the two links found on my index.html page: <html ng-app="myApp"> . . . <body> <h1>My Home Page</h1> ...

javascripthtmlangularjsngrouteroute-provider