下拉菜單沒有JS - 過渡期doesen't工作

在這裏你可以看到我的菜單

的基本結構，當您按照快速與鼠標箭頭指針（從頭到尾交叉菜單）你立即看到子菜單。

我試圖使用屬性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; }

來源

2012-11-29 Marco

這裏是關於CSS3下拉菜單，過渡效果，過渡時間e.t.c.一個偉大的文章還有一節正確使用轉換延遲。檢查它會很好：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-29 18:32:41

感謝，但也不起作用。在這個例子中，當鼠標移過它時，子菜單的外觀沒有延遲。 – Marco

@Marco好朋友我正在評論它。只是等一下 –

@Marco我發現了一些增加延遲與轉換的東西。我編輯了添加鏈接的答案。希望它能解決你的問題。 –

下拉菜單沒有JS - 過渡期doesen't工作

回答

相關問題