CSS奇怪的行爲：溢出和餘裕

Question

我想爲我的網站的菜單做一個漂亮的過渡：當用戶將鼠標懸停在父項上，孩子們滑下來，當鼠標離開時，他們應該回去。但他們不這樣做，如在fiddle中所見。然後我在這裏尋求幫助，並指出使用overflow: hidden;的方法，只有過渡height。好的。但是，躲在我的子項的兒童的項目，如下面的代碼片段所示：

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    width: 180px; 
 
} 
 

 
#menu ul ul { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    background: red none repeat scroll 0 0; 
 
} 
 

 
#menu ul li { 
 
    position: relative; 
 
} 
 

 
#menu ul ul li { 
 
    height: 0; 
 
    transition: height 0.2s ease 0s; 
 
} 
 

 
#menu ul ul ul { 
 
    margin-left: 100%; 
 
    top: 0; 
 
} 
 

 
#menu ul li:hover>ul>li { 
 
    height: 32px; 
 
}

<nav id="menu"> 
 
    <ul> 
 
    <li>Parent Item 
 
     <ul> 
 
     <li>Child Item</li> 
 
     <li>Child Item &gt; 
 
      <ul> 
 
      <li>Child Child Item 1</li> 
 
      <li>Child Child Item 2</li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

所以基本上「子項子項1」和「兒童兒童項目2」項目是對用戶不可見。如何在鼠標懸停/離開時同時向下滑動/向上滑動並顯示兩個子項？它可以在純CSS中完成嗎？

Answer 1

您可以在li 0設置初始opacity，除了0的height

在:hover，改變opacity 1。注意，我沒有列入transition效果的不透明度。我認爲它立即改變可能會更好。

更新

而不是使用opacity的，我覺得最初font-size設置爲0，並擴大將產生更平滑的效果。爲了清晰起見，我已將類添加到觸發器和菜單中。

* { 
 
    cursor: pointer; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    width: 180px; 
 
} 
 

 
#menu ul ul { 
 
    position: absolute; 
 
    background: red none repeat scroll 0 0; 
 
} 
 

 
#menu ul li { 
 
    position: relative; 
 
} 
 

 
.dropdown-one li, 
 
.dropdown-two li { 
 
    height: 0; 
 
    font-size: 0; 
 
    transition: height 0.2s ease 0s; 
 
} 
 

 
#menu ul ul ul { 
 
    margin-left: 100%; 
 
    top: 0; 
 
} 
 

 
.dropdown-trigger-one:hover .dropdown-one>li, 
 
.dropdown-trigger-two:hover .dropdown-two>li { 
 
    height: 32px; 
 
    font-size: 1em; 
 
}

<nav id="menu"> 
 
    <ul> 
 
    <li class="dropdown-trigger-one">Parent Item 
 
     <ul class="dropdown-one"> 
 
     <li>Child Item</li> 
 
     <li class="dropdown-trigger-two">Child Item &gt; 
 
      <ul class="dropdown-two"> 
 
      <li>Child Child Item 1</li> 
 
      <li>Child Child Item 2</li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>