Menu dropdown transition won't work (CSS only) - html

Question

Can someone please help me do dropdown transition here... ?
On hover the dropdown should show up in fade-in manner. This is really confusing because right transition is not working no matter where I apply it. This colorful menu is just an example to get the right idea on how to make the dropdown transition work. I just need a simple ease-in transition that will work. I have been trying hard to fix this. Help is greatly appreciated.
<ul id='nav'>
<li class='menuitem1'>mainmenu1
<ul>
<li class='menuitem1'>Menu 111</li>
<li class='menuitem1'>Menu 22</li>
<li class='menuitem1'>Menu 3333</li>
<li class='menuitem1'>Menu 44
</li>
</ul>
</li>
<li class='menuitem2'>Menu3774
<ul>
<li class='menuitem2'>Menu 111</li>
<li class='menuitem2'>Menu 22</li>
<li class='menuitem2'>Menu 3333</li>
<li class='menuitem2'>Menu 44
</li>
</ul>
</li>
<li class='menuitem3'>Menury
</li>
</ul>
</nav>
<style>
.menuitem1 {
background:#4dd2ff;
}
.menuitem1:hover {
color:#000;
background:#94e4ff;
}
.menuitem2 {
background:#1aff8c;
}
.menuitem2:hover {
background:#87ffc3;
}
.menuitem3 {
background:#d2a679;
}
.menuitem3:hover {
background:#f5c89a;
}
nav > ul {
transition-duration: 0.5s;
}
#nav {
display:table;
margin:0;
}
#nav > li {
cursor:pointer;
list-style:none;
padding:12px 0;
border:1px #959696 solid;
position:relative;
display:table-cell;
width:1%;
text-align:center;
}
#nav ul li {
width: 250px;
display:block;
padding:3px 20px;
text-indent:0;
line-height:40px;
text-align:left;
border-top:1px #fff solid;
border-bottom:1px #fff solid;
border-left:none;
border-right:none;
position:relative;
}
#nav ul {
visibility:hidden;
opacity:0;
max-height:300px;
position:absolute;
filter:alpha(opacity=0);
transition: height 0.3s ease-in;
}
#nav li:hover > ul {
visibility:visible;
opacity:1;
filter:alpha(opacity=100);
}
ul {
display:none;
}
li:hover > ul {
display:block;
position:absolute;
z-index:1000;
border:1px #fff solid;
margin-top:12px;
margin-left:0;
}
#nav > li ul li ul {
left:100%;
top:-2px;
white-space:nowrap;
}
#nav li:hover > a, #nav li:hover {
}
li, li a {
color:#000;
text-decoration:none;
}
* {box-sizing:border-box;-moz-box-sizing:border-box;}
</style>

Answer 1

The transition becomes broken by the conflicting #nav styles you have for the menu. Creating class names is generally a recommended practice. I would reference the following example written on CodePen: https://codepen.io/shshaw/pen/gsFch
<nav>
<ul>
<li class="sub-menu-parent" tab-index="0">
Menu Item 1
<ul class="sub-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li class="sub-menu-parent" tab-index="0">
Menu Item 2
<ul class="sub-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
<li>Sub Item 6</li>
</ul>
</li>
<li class="sub-menu-parent" tab-index="0">
Menu Item 3
<ul class="sub-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul></li>
</ul>
</nav>
<style>
.sub-menu-parent { position: relative; }
.sub-menu {
visibility: hidden; /* hides sub-menu */
opacity: 0;
position: absolute;
top: 100%;
left: 0;
width: 100%;
transform: translateY(-2em);
z-index: -1;
transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}
.sub-menu-parent:focus .sub-menu,
.sub-menu-parent:focus-within .sub-menu,
.sub-menu-parent:hover .sub-menu {
visibility: visible; /* shows sub-menu */
opacity: 1;
z-index: 1;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */
}
/* presentational */
body { padding: 2%; font: 18px/1.4 sans-serif; }
nav a { color: #E00; display: block; padding: 0.5em 1em; text-decoration: none; }
nav a:hover { color: #F55; }
nav ul,
nav ul li { list-style-type: none; padding: 0; margin: 0; }
nav > ul { background: #EEE; text-align: center; }
nav > ul > li { display: inline-block; border-left: solid 1px #aaa; }
nav > ul > li:first-child { border-left: none; }
.sub-menu {
background: #DDD;
}
</style>

Answer 2

The action you want to do is css animation. Animation duration "animation-duration: 4s;" You can adjust it according to you. You can edit the transitions you want to do with "#keyframes example". For more information you can check here. https://www.w3schools.com/css/css3_animations.asp
.menuitem1 {
background:#4dd2ff;
}
.menuitem1:hover {
color:#000;
background:#94e4ff;
}
.menuitem2 {
background:#1aff8c;
}
.menuitem2:hover {
background:#87ffc3;
}
.menuitem3 {
background:#d2a679;
}
.menuitem3:hover {
background:#f5c89a;
}
nav > ul {
transition-duration: 0.5s;
}
#nav {
display:table;
margin:0;
}
#nav > li {
cursor:pointer;
list-style:none;
padding:12px 0;
border:1px #959696 solid;
position:relative;
display:table-cell;
width:1%;
text-align:center;
}
#nav ul li {
animation-name: example;
animation-duration: 4s;
width: 250px;
display:block;
padding:3px 20px;
text-indent:0;
line-height:40px;
text-align:left;
border-top:1px #fff solid;
border-bottom:1px #fff solid;
border-left:none;
border-right:none;
position:relative;
}
#keyframes example {
from {background-color: #94e4ff00;}
to {background-color: #94e4ff;}
from {color: #94e4ff00;}
to {color: black;}
}
#nav ul {
visibility:hidden;
opacity:0;
max-height:300px;
position:absolute;
filter:alpha(opacity=0);
transition: height 0.3s ease-in;
}
#nav li:hover > ul {
visibility:visible;
opacity:1;
filter:alpha(opacity=100);
}
ul {
display:none;
}
li:hover > ul {
display:block;
position:absolute;
z-index:1000;
border:1px #fff solid;
margin-top:12px;
margin-left:0;
}
#nav > li ul li ul {
left:100%;
top:-2px;
white-space:nowrap;
}
#nav li:hover > a, #nav li:hover {
}
li, li a {
color:#000;
text-decoration:none;
}
* {box-sizing:border-box;-moz-box-sizing:border-box;}
<ul id='nav'>
<li class='menuitem1'>mainmenu1
<ul>
<li class='menuitem1'>Menu 111</li>
<li class='menuitem1'>Menu 22</li>
<li class='menuitem1'>Menu 3333</li>
<li class='menuitem1'>Menu 44
</li>
</ul>
</li>
<li class='menuitem2'>Menu3774
<ul>
<li class='menuitem2'>Menu 111</li>
<li class='menuitem2'>Menu 22</li>
<li class='menuitem2'>Menu 3333</li>
<li class='menuitem2'>Menu 44
</li>
</ul>
</li>
<li class='menuitem3'>Menury
</li>
</ul>
</nav>