除非 li 悬停，否则我怎样才能让我的下拉菜单不打开？

Question

一段时间以来，我一直远离使用 opacity 和 height 来使用 css 为下拉菜单设置动画。我这样做的原因是因为它们在没有li 悬停的情况下被激活。

由于下拉菜单不使用display: none; 到display: block; 会发生什么情况，您可以激活li 下方的下拉菜单，其中将显示嵌套菜单。

我厌倦了一遍又一遍地使用相同的动画，所以我尽力防止这种情况发生，但遗憾的是，菜单仍然这样做。 （它似乎也在某些显示器上显示 IE 和 Firefox 中的文本，而不是全部）

这是我的菜单 CSS，

.subNav {
    width: 200px;
    height: 0;
    overflow: hidden;
    font-size: 16px;
    padding-top: 10px;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    position: relative;
    z-index: 100;
    left: 50%;
    margin-left: -100px;
    border-radius: 0 0 5px 5px;
    padding: 10px;
    top: 0;
}

ul.nav li:hover .subNav {
    min-height: 100px;
    height: auto;
    overflow: visible;
    background: #c1c1c1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

这是一个JSFIDDLE，删除 url 中的 show 以查看代码，如果您将鼠标悬停在其下方的 nav 和 div 之间，您将看到它是如何打开的。无论如何我可以防止这种情况吗？

文本剪辑的屏幕截图，（不是问题，因为它非常随机。我在我的 mac chrome 上发生了这种情况，但在我的 windows chrome 上工作似乎很好。在我的计算机上的 firefox 和 IE 中工作而我的同事在 Firefox 中很好。）

Answer 1

解决问题的直接方法是使用visibility 属性。

这是一个 CSS2 属性，因此应该适用于所有主要浏览器，包括完全支持 IE8（您通常需要返回的主要浏览器），但也部分支持 IE6+，根据http://reference.sitepoint.com/css/visibility

您只需要添加：

.subNav { visibility: hidden; }
ul.nav li:hover .subNav { visibility: visible; }

这应该会起作用，我猜你希望它立即起作用。

但是请注意，visibility 和 display 是有区别的，这在技术上仍然呈现 subNav 并分配其定义的空间和位置，但是，在这种情况下它没有由于其他元素的位置性质，这无关紧要。在此处阅读有关差异的更多信息：http://www.w3schools.com/css/css_display_visibility.asp

由于上述visibility 与display 的定位和渲染问题，这可能并不总是正确的解决方案，并且在其他页面上或将来可能会使其他元素不对齐。请注意这一点。

希望这能回答你的问题。

GB。

Answer 2

您应该使用 visibility: hidden 和 visibility: visible on hover。 :) 不要为此使用溢出：隐藏。

我只是说：transition: opacity 0.6s ease; 我已经改进了动画：并添加了不透明度：0；到默认状态和不透明度：1；悬停状态。借助隐藏可见性的一点帮助，一切正常！

http://jsfiddle.net/kQAcY/18/embedded/result/

.subNav {
    width: 200px;
    opacity: 0;
    visibility: hidden;
    font-size: 16px;
    padding-top: 10px;
    transition: opacity 0.6s ease;
    -webkit-transition: opacity 0.6s ease;
    -moz-transition: opacity 0.6s ease;
    -o-transition: opacity 0.6s ease;
    -ms-transition: opacity 0.6s ease;
    position: relative;
    z-index: 100;
    left: 50%;
    margin-left: -100px;
    border-radius: 0 0 5px 5px;
    padding: 10px;
    top: 0;
}

ul.nav li:hover .subNav {
    //min-height: 100px;
    //height: auto;
    opacity: 1;
    visibility: visible;
    overflow: visible;
    background: #c1c1c1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

Answer 3

你去：http://jsfiddle.net/kQAcY/5/。不悬停时，li 应该有overflow:hidden，所以它不能被他的孩子ul 触发，当悬停时，它会显示overflow。

Answer 4

max-height 和 opacity 可以被转换，所以使用这两个属性来保持转换，而不用担心任何显示。溢出时，:before 伪元素不会被转换。 Demo

另外，如果你添加这两个属性，你可以防止悬停发生在#mainNav之外：

#mainNav {
    overflow: hidden;
}

#mainNav:hover {
    overflow: visible;
}

.subNav {
    width: 200px;
    //remove overflow: hidden;
    max-height: 0; /*replace height: 0*/
    font-size: 16px;
    padding-top: 10px;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    position: relative;
    z-index: 100;
    left: 50%;
    margin-left: -100px;
    border-radius: 0 0 5px 5px;
    padding: 10px;
    top: 0;
    opacity: 0; /* add opacity: 0*/
}


ul.nav li:hover .subNav {
    max-height: 500px; /* add max-height: any value larger than your dropdowns; replace min-height */
    background: #c1c1c1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    opacity: 0.99; /* add opacity: 0.99 or 1 */
    //remove overflow: visible;
}

Answer 5

我通过添加opacity 属性并设置top:-999999; 来完成您想要的操作，因此当元素未悬停时，它不会出现在屏幕上，因此不会出现意外悬停。

也没有取消动画

http://jsfiddle.net/kQAcY/19/show/

http://jsfiddle.net/kQAcY/19/

.subNav {
    opacity:0;top:-9999px;
...
...
ul.nav li:hover .subNav {
    top:0px; opacity:1;

Answer 6

如果您将 margin-top 增加到 10px，这至少是一个临时修复并隐藏了在悬停状态之前显示的文本位。

.subNav > li {
        position: relative;
        width: 100%;
        margin-top: 10px;
        text-align: left;
    }