html - 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>