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

我正在创建一个基本的HTML/CSS3下拉菜单。我也试图在下拉菜单上使用淡入淡出的过渡效果。我有这个问题的一个例子是在下面的截屏视频：下拉菜单中的CSS3过渡菜单 - 不可见的第三级菜单项在鼠标移入第二级之前悬停时出现

下拉菜单项的下降被设置为0不透明淡入的1不透明的问题是，当我将鼠标悬停在第三级菜单项所在的区域上，它们会先放在顶级菜单和第二级菜单之前。但是，如果我尝试使用display：none和display：block来显示/消失，则转换效果不起作用。有任何想法吗？我尝试了将高度设置为0然后Auto的建议，但这似乎不起作用。

下面是菜单的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>

来源

2013-08-03 Tom Houy

你能提供HTML代码吗？并可能生成[Fiddle]（http://jsfiddle.net）？ – nirazul

我找到了一个解决方案，它使用visibility：hidden/visibility：visible属性与不透明/转换效果相结合，而不是使用display：none/display：block。 –

我找到了解决这一点，它的使用visibility：hidden的/能见度：可见与不透明度的变化一起，而不是使用显示： none/display：块属性。

来源

2013-08-04 12:06:53

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

回答

相关问题