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>