游标离开影响区域后的悬停延迟/切换效果保持为真

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 下面，而不存在任何gap，而不管父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 Fiddle：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

好吧，谢谢你帮我。毫无疑问，是你们激励我想出了一个解决方案，这对我来说是一个很好的学习教训。

我想出了一个解决问题的方法：

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;
}