Css 当鼠标悬停在其父菜单外时，如何保持下拉菜单可见

我创建了一个简单的导航。当鼠标悬停在其父元素之外时，如何使下拉菜单保持可见？我唯一能想到的是在悬停时填充到父li，但我不希望这样，因为那样会改变导航的高度。谢谢

.topMenuSubMenu{
显示：无；
背景：红色；
}
导航a:悬停~.topMenuSubMenu{
显示：块；
位置：绝对位置；
}
导航>ul{
显示器：flex；
}
导航>ul li{
右边距：20px；
}
导航>导航{
右边距：50px；
} 
a:悬停{
颜色：#FFCC11；
}
导航a：悬停{
颜色：#f4473a！重要；
}
导航a{
颜色：白色；
}
导航{
背景：黑色；
}

您需要在

上显示/隐藏，而不是在

上。因此，将规则改为：

nav li:hover .topMenuSubMenu{
    display: block;
    position: absolute; 
}

---

没问题，很乐意帮忙！