1

我正在创建一个 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”上，然后将其移开。只保留第一项。

4

1 回答 1

0

我相信您在谈论 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 中工作。

干杯

于 2012-12-07T09:33:27.247 回答