CSS下拉菜單 - 鼠標移出時消失得太快

Question

我希望你們中的一個很好的人可以提供幫助。我有一個純粹的CSS下拉菜單，作爲設計的一部分，它需要略微遠離主菜單項，問題在於由於這種設計存在間隙 - 所以只要鼠標從子菜單移開菜單消失。我希望它保持一段時間，以便用戶有更多機會點擊。誰能幫忙？我建立了JS fiddle here。

<div id="menu" class="top"> 
<ul> 
<li><a href="#">home</a></li> 
<li><a href="#">about</a></li> 
<li><a href="#">portfolio</a> 
<ul> 
<li><a href="#">Overview</a></li> 
<li><a href="#">Page 1</a></li> 
<li><a href="#">Page 2</a></li> 
</ul> 
</li> 
    </div> 

#menu{ 
position:absolute; 
left:0; 
zoom:1; 
background-color:#010; 
} 
#menu ul{ 
position:relative; 
border-top: dotted 1px #fff; 
border-bottom: dotted 1px #fff; 
padding:2px 0 2px 0; 
float:right; 
zoom:1; 
list-style:none; 
} 
#menu ul li{ 
margin:0; 
font:16px/16px 'Open Sans', sans-serif; 
padding:0 5px 0 0; 
display:inline; 
position:relative; 
zoom:1; 
} 
#menu ul li a{ 
color:#fff; 
text-decoration:none; 
} 
#menu ul li a:hover{ 
text-decoration:underline; 
} 
#menu ul li.selected a{ 
    color:#8dc63e; 
} 
#menu ul li ul { 
    border: 2px solid #fff; 
    border-radius:10px; 
    background-color: #8dc63e; 
    padding: 0; 
    position: absolute; 
    top: 45px; 
    right: -30px; 
    width: 150px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transiton: opacity 0.8s; 
    -moz-transition: opacity 0.8s; 
    -ms-transition: opacity 0.8s; 
    -o-transition: opacity 0.8s; 
    -transition: opacity 0.8s; 
} 
#menu ul li ul li { 
    display: block; 
    border-bottom: 1px solid #fff; 
    color: #fff; 
    padding:10px; 
} 
#menu ul li ul li:hover { text-decoration:underline; } 
#menu ul li.selected ul li a { color: #fff;} 

#menu ul li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
    z-index:250; 
} 
#menu ul li ul:after{ 
content: ''; 
position: absolute; 
border-style: solid; 
border-width: 0 15px 15px; 
border-color: #fff transparent; 
display: block; 
width: 0; 
z-index: 1; 
top: -15px; 
left: 64px; 
} 

Answer 1

這看起來有點亂，很多重複顯示：沒有設置以及不透明度：0和可見性：隱藏。那裏還有一些z-index。不善於維護。

真的是你需要的是爲UL菜單是不透明度爲0，與過渡，從擺弄因此消除它隨着時間的推移，但不能太快，然後懸停狀態是不透明1.

與小提琴......

#menu ul li ul { 
    border: 2px solid #fff; 
    border-radius:10px; 
    background-color: #8dc63e; 
    padding: 0; 
    position: absolute; 
    top: 45px; 
    right: -30px; 
    width: 150px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    opacity: 0; 
    -webkit-transiton: opacity 8s; 
    -moz-transition: opacity 8s; 
    -ms-transition: opacity 8s; 
    -o-transition: opacity 8s; 
    -transition: opacity 8s; 
} 

和

#menu ul li:hover ul { 
    display: block; 
    opacity: 1; 
    visibility: visible; 
    z-index:250; 
} 

這一個工程，http://jsfiddle.net/ydF3B/1/雖然我設定的過渡是從787-8 ... 0.8秒你可能想通過挖並刪除所有不需要的樣式並查看實際正在進行的操作。

玩得開心:)

編輯我前面提到想通過這一切來挖評論完整的理由，小提琴上面並沒有在評論中指出解決您的問題:)而不是一個更好的方法就是讓你徘徊在較大的區域，以便當你從菜單項移動到菜單上時，即使存在視覺差距，也沒有實際的差距。我通過增加填充來做到這一點：http://jsfiddle.net/ydF3B/2/