Question

我正在创建一个CSS多维菜单。我正在使用过渡来淡入/淡出以避免将鼠标移动1个像素，从而最大限度地减少菜单问题。它可以工作，但是当你移开鼠标时，如果子菜单中有多个项目，那么第一个项目对于缓出过渡是不可见的。

相关代码：

ul.menu li>ul {
....
    overflow:hidden;
    visibility:hidden;
    opacity:0;
    transition:visibility 0s linear 0.5s, overflow 0s linear 0.5s, opacity 0.5s linear 0s;
}
ul.menu li:hover>ul {
    overflow:visible;
    visibility:visible;
    opacity:1;
    transition:visibility 0s linear 0s, overflow 0s linear 0.5s, opacity 0.5s linear 0s;
}

Jsfiddle：http://jsfiddle.net/fGWzg/ 如何重现问题：将鼠标移动到主栏中的第一个“hi”，然后将其移开。只剩下第一个项目。

Answer 1

我相信你在谈论Firefox，因为webkit浏览器没有显示任何转换，你可能想要在Chrome或Internet Explorer中查看你的网站。你应该始终在Chrome中开发，它现在比Firebug优越。

至于你的问题：

ul.menu li > ul {
    height: 100%; /* delete */
    left: 0;
    margin: 0;
    opacity: 0;
    ...
}

经过大量工作：

/* reset */
body {
    margin:0;
}
ol, ul {
    margin: 0;
    padding: 0;
}

/* global */
ul.menu,
ul.menu ul {
    list-style-type: none;
}
ul.menu,
ul.menu a {
    color: white;
}
ul.menu a {
    display: block;
    text-decoration: none;
}
ul.menu li {
    position: relative;
    height: 35px;
    line-height: 35px;
    font-weight: bold;
    text-align: center;
}
ul.menu li:hover {
    background-color: #11689E;
}

/* menu (just the first one) */
ul.menu {
    padding-left: 35px;
    background: #1BBFE0;
}
ul.menu > li {
    margin-right: 8px;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    width: 5%;
    background-color: #1B94E0;
}

/* sub-menus (fading menus) */
ul.menu ul {
    position: absolute;
    width: 100%;
    background-color: #1B94E0;
    visibility: hidden;
    opacity: 0;
}
ul.menu li:hover > ul {
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity .5s linear;
       -moz-transition: opacity .5s linear;
         -o-transition: opacity .5s linear;
            transition: opacity .5s linear;
}

/* "pop out" sub-menus */
ul.menu li > ul ul {
    top: 0;
    right: -100%;
}

http://jsfiddle.net/654Ta/2/

适用于除IE7及以下版本之外的所有浏览器（由于不支持>选择器）。如果你替换它们，它将在IE6中工作。

干杯

CSS Transition隐藏元素

1 个答案: