Css 菜单栏在我点击它之前消失了？

这是一个类似于的问题，但解决方案对我不起作用。我还没来得及点击下拉菜单，它就消失了。它在Firefox上运行得更好，但前提是快速移动光标

有什么想法吗

如果有帮助的话，整个菜单容器（导航栏上的链接+悬停时显示的链接）的z索引为1

此外，为了制作此菜单，我非常仔细地学习了本教程：

谢谢大家!

你说得对，斯科特，这是密码：

HTML代码

    <nav>
<ul>
    <li style="background-color: #AECC4C;"><a href="">Home</a>
     </li>
    <li><a href="">How It Works</a>
    <div class="menu-container-1">
        <div class="column-1">
        <a href="">Submenu 1</a>
        </div>
        <div class="column-1">
        <a href="">Submenu 2</a>
        </div>                                              
     </div>
     </li>
    <li><a href="">Post Here</a></li>
    <li><a href="">Blog</a>
        <div class="menu-container-2">
            <div class="column-1">
                <a href="">Articles</a>
            </div>
            <div class="column-1">
                <a href="">Related links</a>
            </div>                                          
         </div></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
    <li style="text-decoration:underline"><a href="">Donate!</a></li>
</ul>
</nav>

---

一种解决方案是显式声明包含div的菜单的顶部距离：

nav li:hover .menu-container-1 {
 top: 11px;
 left:150px;
 width: 120px;
}

nav li:hover .menu-container-2 {
 top: 11px;
 left:420px;
 width: 100px;
}

如果你的菜单项高度都是静态的，这应该可以做到

---

更新的JSFIDLE:

一个解决方案是显式声明包含div的菜单的顶部距离：

nav li:hover .menu-container-1 {
 top: 11px;
 left:150px;
 width: 120px;
}

nav li:hover .menu-container-2 {
 top: 11px;
 left:420px;
 width: 100px;
}

如果你的菜单项高度都是静态的，这应该可以做到

---

更新后的JSFIDLE:

如果您发布一些相关的html和css代码，会有所帮助。您可以将问题重新创建为一个问题，或者提供一个指向您的断页的链接吗？大家好，这里有一个指向JSFIDLE demo的链接和代码：在我的版本中，nav和下拉菜单之间的空间较小，但基本上存在相同的问题。确保在全屏上看到它以获得想法。再次感谢！对你有帮助的是发布一些相关的html和css代码。你能把这个问题重新创建为一个问题，或者提供一个链接到你破碎的页面吗？大家好，这里有一个链接到JSFIDLE demo和代码：在我的版本中，nav和下拉菜单之间的空间小了一点，但基本上也有同样的问题。确保在全屏上看到它以获得想法。再次感谢！谢谢你，托德，这就成功了！这是一个如此简单的解决方案，这让我感到尴尬，但也让我松了一口气：）谢谢你，托德，成功了！这是一个如此简单的解决方案，这让人感到尴尬，但也让人松了一口气：）