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>