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

Question

我正在使用这个页面的代码：

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 的孩子时，我不明白为什么它可以与兄弟选择器一起使用。

我做错了什么？

谢谢！

Answer 1

我不能 100% 确定您的代码为何无法运行。我确实重写了它，以尝试使用一些我认为更容易使用的方法来获得你想要的东西。

1. 利用@keyframes 是使用可重用代码块构建应用程序的好方法。

2. 利用 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>