懸停延遲/懸停效果在光標離開效果區域後保持爲真

Question

我已經開始製作此網頁，其中包含用於更改網頁語言的懸停菜單。

顯示三個標誌。這是一個懸停的地方，只有當我懸停在英國國旗上時，丹麥和德國國旗纔會出現。

然而，這會產生一個問題，因爲在10個像素的標誌之間有一個空白。一旦光標離開英國國旗，懸停菜單就消失。我需要某種延遲，在光標離開效果區域後的1-2秒內保持懸停效果。所以我可以達到丹麥和德國的國旗。

我的HTML代碼：

<div id="nav"> 
<ul style="list-style:none;"> 
<li><img id="England" src="England.png"> 
<ul style="list-style:none;"> 
<li><img id="Denmark" src="Denmark.png"></li> 
<li><img id="Germany" src="Germany.png"></li> 
</ul> 
</li> 
</ul> 
</div> 

我的CSS代碼：

#nav ul li:hover ul{ 
display: block; 

} 

#nav ul ul{ 
display: none; 

} 

#England{ 
image-size:absolute; 
height:60px; 
width:86px; 
position: absolute; 
top:10px; 
left:524px; 
} 

#Denmark{ 
image-size:absolute; 
height:60px; 
width:86px; 
position: absolute; 
top:80px; 
left:524px; 
} 

#Germany{ 
image-size:absolute; 
height:60px; 
width:86px; 
position: absolute; 
top:150px; 
left:524px; 
} 

我一直在使用過渡延遲嘗試：1秒;但沒有運氣。 有沒有什麼可以幫助我的出色思想？

Answer 1

答案是不是所有的列表項單獨而是放置它們的分組父ul。

通過應用position:absolute和top:100%，子菜單將始終是父li下面無間隙的父li多高是無論。

* { /* quick reset */ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#nav{ /* just for spacing in demo */ 
 
    padding: 25px; 
 
} 
 
#nav > ul > li { 
 
    position: relative; /* positioning context */ 
 
    background: lightgreen; 
 
    display: inline-block; 
 
} 
 
#nav ul ul { 
 
    display: none; 
 
    position: absolute; 
 
    top:100%; 
 
    left:0; 
 
    background: orange; 
 
} 
 
#nav ul li:hover ul { 
 
    display: block; 
 
}

<div id="nav"> 
 
    <ul style="list-style:none;"> 
 
     <li>Flags 
 
      <ul style="list-style:none;"> 
 
       <li>England</li> 
 
       <li>Denmark</li> 
 
       <li>Germany</li> 
 
      </ul> 
 
     </li> 
 
    </ul> 
 
</div>

絕對定位是非常差的佈局方法，只能用於特定的效果。它有它的位置，但是把每一個元素都推到恰當的位置不是它。這可能有幫助LearnLayout.com

Answer 2

我測試這和它的作品對我來說:)

JS小提琴：http://jsfiddle.net/ogwdgwew/

我所做的就是把所有的元素在一個單一的UL，但元素到丹麥之前添加僞::和德國的旗幟，以彌合以前的空白。

HTML：

<div id="nav"> 
<ul id="flags"> 
    <li><img id="England" src="England.png"/></li> 
    <li><img id="Denmark" src="Denmark.png"/></li> 
    <li><img id="Germany" src="Germany.png"/></li> 
</ul> 
</div> 

CSS：

#England{ 
height:60px; 
width:86px; 
position: absolute; 
top:10px; 
left:524px; 
} 

#Denmark::before, 
#Germany::before{ 
position: absolute; 
width: 86px; 
height: 10px; 
content: ""; 
top: -10px; 
} 

#Denmark{ 
height:60px; 
width:86px; 
position: absolute; 
top:80px; 
left:524px; 
display: none; 
} 

#Germany{ 
height:60px; 
width:86px; 
position: absolute; 
top:150px; 
left:524px; 
display: none; 
} 
#flags{ 
list-style: none; 
} 

#flags:hover *{ 
display: block; 
} 

Answer 3

好的thx所有幫助我。毫無疑問，你們激勵我提出了一個解決方案，這對我來說是一個很好的學習課程。

我想出了這個解決我的問題：

HTML：

<div id="nav"> 
<ul style="list-style:none;"> 
<li><img id="England" src="England.png"> 
<ul style="list-style:none;"> 
<li><img id="Denmark" src="Denmark.png"></li> 
<li><img id="Germany" src="Germany.png"></li> 
</ul> 
</li> 
</ul> 
</div> 

CSS：

#nav{ /* just for spacing in demo */ 
position: absolute; 
top:10px; 
left:524px; 
} 

#nav > ul > li { 
position: relative; /* positioning context */ 
background: transparent; 
display: inline-block; 
} 

#nav ul ul { 
display: none; 
position: absolute; 
top:100%; 
left:0; 
background: transparent; 
} 

#nav ul li:hover ul { 
display: block; 
}