LI 能见度与 UL 高度无关

Question

我正在建立一个供个人使用的网站。该网站有一个由 CSS3 动画制作的下拉菜单。我非常喜欢结果的外观和感觉，直到我意识到无序列表中的列表项相对于下拉列表的高度不可见/不可见。我寻求的信息是解决此问题的方法。这很烦人，尤其是考虑到我已经投入了一些看起来如此简单的事情......

相关的 HTML：

<ul class="dMaster">
    <li class="dChild"><a href="index.php" class="bItem" id="homeItem">Home</a></li>
    <li class="dChild" style="cursor: default;">About
        <ul class="dMaster2">
            <li class="dChild2"><a href="about.php" class="bItem" id="gAboutItem">General</a></li>
            <li class="dChild2"><a class="bItem" id="twItem" target="_blank">Twitter</a></li>
            <li class="dChild2"><a class="bItem" id="ytItem" target="_blank">YouTube</a></li>
        </ul>
    </li>
</ul>

相关CSS：

@keyframes dropdown {
    from { height: 0px; }
    to { height: 77px; }
} @-webkit-keyframes dropdown {
    from { height: 0px; }
    to { height: 77px; }
}
.dMaster {
    margin: 0;
    padding: 0;
    text-align: center;
} .dChild {
    margin: 0;
    padding: 0;
    height: 19px;
    width: 60px;
    float: left;
    list-style: none;
} .dChild:hover {
    color: #000;
    background: #C60;
    border: 1px solid #FFF;
    border-top: none;
    text-shadow: 1px 1px 5px #FFF;
} .dMaster2 {
    padding: 0;
    position: absolute;
    min-width: 60px;
    text-align: center;
    background: #C60;
    border: 1px solid #FFF;
    margin: -2px 0  0 -1px;
    visibility: hidden;
} .dChild2 {
    opacity: 0.5;
    padding: 2px 5px;
    list-style: none;
    -webkit-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
} .dChild2:hover {
    opacity: 1.0;
} ul li:hover ul {
    color: #FFF;
    visibility: visible;
    animation: dropdown 0.2s ease-out;
    -webkit-animation: dropdown 0.2s ease-out;
}

我已经尝试了一两个小时，使用了许多不同的技术，但都无济于事。如果需要，有一个 JSFiddle here。非常感谢任何帮助！

旁注：下拉菜单位于“关于”上。一开始可能不太明显，但是当 UL 向下延伸时，列表项非常明显。

Answer 1

只需在代码中添加一行就可以了：

.dMaster2 {
    /*...*/
    overflow:hidden;
}

旁注：

为了可用性起见，您应该将动画减少到最大值。 1秒。用户不想等待 2 秒来展开下拉菜单。

此外，您不需要关键帧来执行此操作，只需为 ul 元素的高度属性设置动画即可。

.dMaster2 {
    /*...*/
    visibility:hidden; /* <- remove this line! */
    overflow:hidden;
    transition:height .3s; /*add height transition, use ~ .5s */
    /* if you add the transition to the root element both, mousein and mouseout
       will be animated, which is not the case if you put it on the :hover */
    height:0;              /*add height property */
}
ul li:hover ul {
    color: #FFF;
    visibility: visible;
    height:102px;        /*add height property */
    /* if you put the transition here, only the mousein will be animated */
}

Your modified fiddle

Answer 2

可能that 是您要找的吗？

基本上它为每一行使用不同的transition-delay。

我努力使fiddle 上的所有内容都更清楚，而我没有在上一个中。你真的应该检查第二个是否有一个好的 vue 点。

目标是实现一次显示一个。两种解决方案：

1. 每行唯一的 ID
2. 使用 nth-child 获取每一行。

假设我们有 3 个项目要在 3 秒内显示。这是我们的时间线：

t      Action
_____________
0 | The rectangle begins to display.
  |
1 | Rectangle at 1/3 of its height. We display our item n° 1.
  |
2 | Rectangle at 2/3 of its height. We display our item n° 2.
  |
3 | Rectangle at 3/3 of its height. We display our item n° 3.
  v

让我们修改代码：

HTML

<a>Hover me</a>

<ul>
    <li>Hey</li>
    <li>Hi</li>
    <li>Ho</li>
</ul>

我们的目标很简单：

我们希望如果我们将鼠标拖到<a> 标签上，它会逐渐显示<ul> 和不同的<li> 元素。此外，我们希望它在鼠标悬停在菜单上时保持不变，但在鼠标离开<a> 或<ul> 时立即消失。

CSS

基础知识

ul { /* Hidden and width no height */
    visibility: hidden;
    background-color: white;
    height: 0px;
    border: 1px solid black;
}

a:hover ~ ul { /* When the mouse goes over the <a> it becomes visible and begins the transition */
    visibility: visible;
    background-color: orange;
    height: 60px;
    transition: height 3s;
}

现在我们进入“棘手的部分”：

a:hover ~ ul li { /* Default behaviour for appearing */
    opacity: 1;
    transition: opacity 0.2s;
}

/* And now for each child, its custom delay :*/

a:hover ~ ul li:nth-child(1) {
    transition-delay: 1s;
}

a:hover ~ ul li:nth-child(2) {
    transition-delay: 2s;
}

a:hover ~ ul li:nth-child(3) {
    transition-delay: 3s;
}

还有 TADAAAAM ！轻轻松松！

在另一边，避免它们逐渐消失：

/* To make the depop instantly */

a ~ ul li {
    opacity: 0;
    transition-delay: 0s;
}

a ~ ul li:nth-child(1) {
    transition-delay: 0s;
}

a ~ ul li:nth-child(2) {
    transition-delay: 0s;
}

a ~ ul li:nth-child(3) {
    transition-delay: 0s;
}

给你。当然，它不是很有活力，如果你需要为每个孩子都这样做，很快就会很无聊。但是您可以使用脚本来生成该代码。 :)

希望对您有所帮助。