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

我尝试过使用transition-delay：1s;但没有运气。有什么聪明的头脑可以帮助我吗？

Answer 1

我对此进行了测试，它对我有用：）

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

我所做的是将所有元素放在一个单独的ul中，但是将一些伪:: before元素添加到丹麦和德国的旗帜中，以便它们弥合之前空洞的差距。

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 2

答案不是单独列出所有列表项，而是将它们分组到父ul中。

通过应用position:absolute和top:100%，子菜单始终低于父li ，没有任何差距 ，无论如何高父li是。

＆＃13;

* { /* 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;
}

＆＃13;

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

＆＃13;

绝对定位是一种非常差的布局方法，只能用于特定效果。它有它的位置，但是将每个元素都推到正确的位置并不是它。这可能会有助LearnLayout.com

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

光标离开效果区域后悬停延迟/悬停效果保持不变

3 个答案: