html - CSS过渡在下拉菜单中不起作用

我正在使用此页面的代码：


  https://codepen.io/shshaw/pen/gsFch


现在，我的CSS看起来像：

.subs {
visibility: hidden;
opacity: 0;
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;

width: auto;
float: left;
position: absolute;
text-align: left;
border: 2px solid #66ec95;
background: #f4f7f5;
border-radius: 0 5px 5px 5px;
margin-top: -10px;
margin-left: -10px;
}

/* SELECTORS */

#nav li:hover > .subs { /* with this seletor, only the last property is working */
visibility: visible;
opacity: 1;
z-index: 1;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s;
margin-top: 10px; /* just for test, only this is working */
}

#nav li :hover + .subs { /* this time, the animation are working but other problems occured (see above) */
visibility: visible;
opacity: 1;
z-index: 1;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s;
}

我的HTML：

<ul id="nav">
            <li aria-haspopup="true">
                <a href="javascript:void(0)">Services</a>
                <div class="subs" id="service-subs" aria-haspopup="false">
                    <a href="~/services/all">Product List</a><br />
                    <a href="~/services/projects">Projects</a><br />
                </div>
            </li>
            ... and so on

因此，.subs的第二个选择器显示动画，但是当我将光标移到.subs时它会中断，并且由于光标在显示菜单时检测到.subs，因此在显示时也被中断了很多次。

此外，当.subs是#nav li的子级时，我无法理解为什么它与同级选择器一起工作。

我究竟做错了什么？

谢谢！

最佳答案

对于您的代码为何不起作用的问题，我不是100％肯定的。我确实重写了它，以尝试使用一些我认为更易于使用的方法来获得您想要的功能。


利用@keyframes是使用可重用的代码块构建应用程序的好方法。
利用translate3d将利用计算机/设备的GPU来实现更流畅的翻译。


请注意，我没有花时间添加HTML包装程序，该包装程序将在下拉菜单隐藏时隐藏它们。通过将整个菜单包装在div中并将overflow设置为hidden，可以轻松完成此操作。

抱歉，我无法帮助您了解更多有关获得错误的原因。

.sub-menu-parent {
  position: relative;
}

.sub-menu {
  position: absolute;
  width: 100%;
  display: none;
  z-index:-1;
}

.sub-menu-parent:hover .sub-menu {
  display: block;
  animation: 1s slideDown forwards;
}

@keyframes slideDown {
  0% {
    transform: translate3d(0px, -200px, 0px);
    opacity: 0;
    z-index:-1;
  }
  99% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
    z-index:-1;
  }
  100% {
    z-index:0;
  }
}

/* presentational */
body {
  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;
}

<nav>
   <ul>
     <li class="sub-menu-parent">
       <a href="#">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"><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"><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>