菜单下拉过渡不起作用(仅限 CSS)

Question

谁能帮我做下拉过渡…？悬停时，下拉菜单应该以渐隐的方式显示。这真的很令人困惑，因为无论我在哪里应用右过渡都不起作用。这个彩色菜单只是一个例子，以获得正确的想法，如何使下拉过渡工作。我只需要一个简单的过渡就可以了。我一直在努力解决这个问题。非常感谢你的帮助。

<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

由于菜单的#nav样式冲突，使得过渡效果失效。创建类名通常是推荐的做法。我要参考下面写在CodePen上的例子:https://codepen.io/shshaw/pen/gsFch

<nav>
<ul>
<li class="sub-menu-parent" tab-index="0">
<a href="http://google.com">Menu Item 1</a>
<ul class="sub-menu">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
</ul>
</li>
<li class="sub-menu-parent" tab-index="0">
<a href="#">Menu Item 2</a>
<ul class="sub-menu">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Sub Item 5</a></li>
<li><a href="#">Sub Item 6</a></li>
</ul>
</li>
<li class="sub-menu-parent" tab-index="0">
<a href="#">Menu Item 3</a>
<ul class="sub-menu">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></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

你要做的动作是css动画。动画时长:45秒;你可以根据自己的需要进行调整。你可以使用"@keyframes example"来编辑你想要的过渡效果。更多信息请点击这里。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>