css - 菜单栏在我点击之前就消失了？

Question

类似I have a css drop down menu that disappears的问题但解决方案对我不起作用。下拉菜单在我单击之前就消失了。它在 Firefox 上运行得更好，但前提是您快速移动光标。

有什么想法吗？

如果有帮助的话，整个菜单容器(因此，导航栏上的链接 + 悬停时出现的链接)的 z-index 为 1。

此外，为了制作这个菜单，我非常严格地遵循了这个教程:http://youhack.me/2011/09/18/how-to-build-a-drop-down-menu-enhanced-with-css3/

谢谢!

你是对的，Scott，这是代码:

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>

CSS代码

    .menu-container-1, .menu-container-2 {
z-index: 1;
margin:10px auto;
float:left;
position:absolute;
left:-999em;
text-align:left;
padding:10px 5px;
border:1px dotted #b7b7b7;
border-top:none;
background:#ffffff;
    }

    .column-1, .column-2 {
display:inline;
float:left;
position:relative;
margin:2px 5px;
     }

      .column-1 a, .column-1 a:visited {
display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
text-decoration: none;
color: #000;
        -webkit-transition: all .3s ease;
        -moz-transition: all .2s ease;
        -o-transition: all .2s ease;
padding: 0px 0px 0px 0px;
    }

    .column-1 a:hover, .column-1 a:focus {
color: #EB6110;
     }

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

    nav li:hover .menu-container-2 {
left:450px;
width: 100px;

    }

Answer 1

一种解决方案是显式声明包含 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;
}

如果您的菜单项高度都是静态的，这应该可以解决问题。

更新的 jsFiddle:http://jsfiddle.net/LfexE/1/