1

我们有这个问题

在这里你可以看到我的菜单的基本结构

http://jsfiddle.net/L8FLe/2/

当您使用鼠标指针快速跟随箭头（从标题到底部交叉菜单）时，您会立即看到子菜单。

我正在尝试使用属性 transition-duration ma 延迟此操作（0.7 秒）不起作用。实际上，我会延迟子菜单的外观，当鼠标指针从按钮gender1转到gender2时，当您快速移动鼠标越过菜单时，您看不到子菜单。

谢谢大家，我的英语很糟糕，对不起！

我的html

<p style="margin-left:50px">FOLLOW THE ARROW <BR /><BR /> &darr;</p>

<ul class='dd_menu'>
<li><a href='#nogo'>Gender 1</a>
    <div id="pluto">
    <a href='#nogo1'>Male</a><br />
    <a href='#nogo2'>Female</a>
    </div>
</li>
<li><a href='#nogo'>Gender 2</a>
    <div id="pluto">
    <a href='#nogo1'>Male</a><br />
    <a href='#nogo2'>Female</a>
    </div>
</li>

</ul>
----

我的 CSS

.dd_menu { padding:0px; margin:0; list-style-type:none; height:30px; width:500px; margin:55px 0 0 55px; border:#CCC 1px dashed}
.dd_menu li {float:left; height:30px; border-right: solid 1px white; width:95px; }
.dd_menu li a {display:block;  height:28px;  padding:3px 5px 3px 5px;}

.dd_menu li:hover {position:relative; background-color:#DDD;  }

#pluto  {border:#CCC 1px solid; width:100px; display:none;}

.dd_menu li:hover #pluto { display:inline; width:95px; display:block;  -webkit-transition-duration: 1s;
    transition-duration: 0.7s;
    -moz-transition-duration: 0.7s;
    -o-transition-duration: 0.7s;
    -ms-transition-duration: 0.7s; }
4

1 回答 1

0

这是一篇关于 css3 下拉菜单、过渡效果、过渡时间等的精彩文章还有一个关于正确使用过渡进行延迟的部分。检查它会很棒： http ://www.identifydesign.net/tutorials/css/pure-css-animated-dropdown-menu/ 您需要的信息在添加时序标题下。

您也可以查看：关于过渡延迟的 W3school 文章：http: //www.w3schools.com/cssref/css3_pr_transition-duration.asp

编辑：

这可能是因为错误的顺序应该是这样的：

   transition-duration: 0.7s;
   -moz-transition-duration: 0.7s; /* Firefox 4 */
   -webkit-transition-duration: 0.7s; /* Safari and Chrome */
   -o-transition-duration: 0.7s; /* Opera *
于 2012-11-29T18:32:41.620 回答