下拉菜单中的 CSS3 过渡 - 在将鼠标悬停在第二级之前，不可见的第三级菜单项出现在悬停上

Question

我正在创建一个基本的 HTML/CSS3 下拉菜单。我还尝试在下拉菜单上使用淡入淡出的过渡效果。我遇到的问题的一个示例在下面的截屏视频中:

http://tinypic.com/r/95r2tt/5

下拉菜单项设置为 0 的不透明度逐渐变为 1 的不透明度。问题是，当我将鼠标悬停在第三级菜单项所在的区域时，它们会在鼠标悬停在顶层之前出现，并且首先是二级菜单。但是，如果我尝试对它们使用 display:none 和 display:block 来使它们出现/消失，那么过渡效果将不起作用。有任何想法吗？我尝试了将高度设置为 0 然后设置为自动的建议，但这似乎没有用。

这是菜单的 CSS:

<style type="text/css">
.mymenu {
    background-color: #000;
}
.mymenu ul {
    position: relative;
    float: left;
    margin: 0px;
    padding: 0px;
    width: 100%;
    background-color: #CCC;
    list-style-type: none;
}
.mymenu ul li {
    position: relative;
    display: block;
    float: left;
    margin: 0px;
    padding: 0px;
}
.mymenu ul li a {
    position: relative;
    display: block;
    overflow: visible;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}
.mymenu ul li a:link, .mymenu ul li a:visited {
    background-color: #900;
}
.mymenu ul li a:hover, .mymenu ul li a:active {
    background-color: #000;
}
.mymenu ul li ul {
    position: absolute;
    width: auto;
    opacity: 0;
    -webkit-transition: all .5s;
       -moz-transition: all .5s;
        -ms-transition: all .5s;
         -o-transition: all .5s;
            transition: all .5s;
}
.mymenu ul li ul li {
    position: relative;
    float: none;
}

.mymenu ul li ul li a {
    white-space: nowrap;
    font-weight: normal;
    font-size: 12px;
}
.mymenu ul li ul li a:link, .mymenu ul li ul li a:visited {
    background-color: #C00;
}
.mymenu ul li ul li a:hover, .mymenu ul li ul li a:active {
    background-color: #000;
}
.mymenu ul li:hover > ul {
    opacity: 1;
}
.mymenu ul li ul li:hover {
    opacity: 1;
}
.mymenu ul li ul li ul {
    position: absolute;
    top: 25%;
    left: 95%;
    z-index: 1;
}
.mymenu ul li ul li ul li a {
    font-size: 10px;
}
.mymenu ul li ul li ul li a:link, .mymenu ul li ul li ul li a:visited {
    background-color: #F90;
}
.mymenu ul li ul li ul li a:hover, .mymenu ul li ul li ul li a:active {
    background-color: #000;
}
</style>

Answer 1

我找到了解决方案，它是使用 visibility:hidden/visibility:visible 以及不透明度的变化，而不是使用 display:none/display:block 属性。