Html 光标离开效果区域后，悬停延迟/悬停效果保持为真

我已经开始制作这个带有悬停菜单的网页，用于更改我的网页语言

显示了三个标志。这是一个只有当我在英国国旗上方悬停时丹麦和德国国旗才会出现的悬停

但是，这会产生一个问题，因为10个像素的标志之间存在gab。一旦光标离开英国国旗，悬停菜单就会消失。我需要某种延迟，使光标离开效果区域后悬停效果保持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>

我尝试过使用转换延迟：1s；但是没有运气。

---

有没有聪明的人可以帮我

我测试了这个，它对我有效：）

JS小提琴：

我所做的是将所有元素放在一个ul中，但在丹麦和德国国旗上添加了pseudo：：before元素，以便它们弥补以前的空白

HTML:

---

答案不是将所有列表项单独定位，而是将它们分组到父级

ul

通过应用

position:absolute

和

top:100%

，无论父

li

有多高，子菜单都将始终位于父

li

下方，没有任何间隙

*{/*快速重置*/
保证金：0；
填充：0；
}
#nav{/*仅用于演示中的间距*/
填充：25px；
}
#导航>ul>li{
位置：相对；/*定位上下文*/
背景：浅绿色；
显示：内联块；
}
#导航ul{
显示：无；
位置：绝对位置；
最高：100%；
左：0；
背景：橙色；
}
#导航ulli：悬停ul{
显示：块；
}

旗帜

英格兰
丹麦
德国

好的，谢谢大家帮助我。毫无疑问，是你们启发我想出了一个解决方案，这对我来说是一个很好的教训

我为我的问题想出了这个解决方案：

HTML:

---

这完全是iRelavent，自从你让我意识到这一点以来，我已经从代码中删除了它。然而，他们在下面的教程中做到了这一点，这就是我为什么这么做的原因！再也不会了。很抱歉，我现在尝试了这个，但它对我不起作用：/我有确切的结果作为我自己的代码。当我悬停时，标志会向前悬停，当我进入标志之间的间隙时，标志会消失。@user3677855-你是否删除了你编写的所有代码，并用我编写的代码替换了它？好吧，这真的很奇怪。你的提琴可以工作，但当我把你的代码粘贴到eclipse中并在chrome中运行时，它就不工作了。。。。。。你试过在chrome上运行你的浏览器吗？@user3677855-我把chrome作为我的主浏览器，并对它进行了测试，它成功了！。。。这真的很让人困惑，虽然我不得不对你的代码做一些修改，以使它达到我想要的效果，但你确实提出了解决方案。那就是我去掉了你的填充物：25px；并将其替换为预定位置。然后我将背景色改为透明。最后，我将html改为：

• • 。所以我猜你有幸找到了解决方案

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

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

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

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

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