Why isn't my transition working? [duplicate] - css

Question

This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 5 years ago.
How can I get my transition to work? From other examples I have seen and tried it look like it should be working. I'm wanting a slight delay on the display of the sub-menu so that they are instantly shown when the mouse rolls over them.
.TopMenuBar {
border: none;
background-color: purple;
width: 100%;
margin: 0;
padding: 0;
}
.TopMenuBar>ul {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
}
.TopMenuBar>ul,
.dropdown-menu>ul,
.sub-dropdown-menu>ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.TopMenuBar>li {
display: inline;
}
.TopMenuBar a,
.dropdown-menu a,
.sub-dropdown-menu a {
color: white;
text-decoration: none;
padding: 20px;
display: block
}
/* Applys to all links under class TopMenuBar on hover */
.dropdown-menu,
.sub-dropdown-menu {
display: none;
background-color: purple;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
position: absolute;
z-index: 1;
}
/* Applys to all links under class TopMenuBar */
.dropdown-menu a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-menu {
display: block;
transition: all 1s linear 1s;
}
.sub-dropdown {
position: relative;
}
.sub-dropdown-menu {
left: 100%;
top: 0;
white-space: nowrap;
}
<div class="TopMenuBar">
<ul>
<li>Home</li>
<li class="dropdown">Programs
<div class="dropdown-menu">
<ul>
<li>Preschool Mandarin
<li>Grade School Mandarin</li>
<li>High School Mandarin</li>
<li>Weekend Class</li>
<li>Summer Camp</li>
<li class="sub-dropdown">Examination Training
<div class="sub-dropdown-menu">
<ul>
<li>AP Test</li>
<li>YCT Test</li>
<li>HSK Test</li>
</ul>
</div>
</li>
<li class="sub-dropdown">Adult Mandarin
<div class="sub-dropdown-menu">
<ul>
<li>Conversational Mandarin Class</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="dropdown">Resources
<div class="dropdown-menu">
<ul>
<li>Chinese Club</li>
<li>Literature</li>
</ul>
</div>
</li>
<li class="dropdown">Contact us
<div class="dropdown-menu">
<ul>
<li>Customer Service</li>
<li>Careers</li>
</ul>
</div>
</li>
<li class="dropdown">Registration
</ul>
</div>

Answer 1

Cause transitions do not work if element is or has display: none; one way around it is to use visibility:hidden; and opacity: 0;
Also it is better practice to define
transition: all 1s linear 1s;
on the element itself not just on the :hover state
Like so:
.TopMenuBar {
border: none;
background-color: purple;
width: 100%;
margin: 0;
padding: 0;
}
.TopMenuBar>ul {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
}
.TopMenuBar>ul,
.dropdown-menu>ul,
.sub-dropdown-menu>ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.TopMenuBar>li {
display: inline;
}
.TopMenuBar a,
.dropdown-menu a,
.sub-dropdown-menu a {
color: white;
text-decoration: none;
padding: 20px;
display: block
}
/* Applys to all links under class TopMenuBar on hover */
.dropdown-menu,
.sub-dropdown-menu {
visibility: hidden;
opacity: 0;
background-color: purple;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
position: absolute;
z-index: 1;
transition: all 1s linear 1s;
}
/* Applys to all links under class TopMenuBar */
.dropdown-menu a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}
.sub-dropdown {
position: relative;
}
.sub-dropdown-menu {
left: 100%;
top: 0;
white-space: nowrap;
}
<div class="TopMenuBar">
<ul>
<li>Home</li>
<li class="dropdown">Programs
<div class="dropdown-menu">
<ul>
<li>Preschool Mandarin
<li>Grade School Mandarin</li>
<li>High School Mandarin</li>
<li>Weekend Class</li>
<li>Summer Camp</li>
<li class="sub-dropdown">Examination Training
<div class="sub-dropdown-menu">
<ul>
<li>AP Test</li>
<li>YCT Test</li>
<li>HSK Test</li>
</ul>
</div>
</li>
<li class="sub-dropdown">Adult Mandarin
<div class="sub-dropdown-menu">
<ul>
<li>Conversational Mandarin Class</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="dropdown">Resources
<div class="dropdown-menu">
<ul>
<li>Chinese Club</li>
<li>Literature</li>
</ul>
</div>
</li>
<li class="dropdown">Contact us
<div class="dropdown-menu">
<ul>
<li>Customer Service</li>
<li>Careers</li>
</ul>
</div>
</li>
<li class="dropdown">Registration
</ul>
</div>