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/

谢谢！

你是对的，斯科特，这是代码：

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/

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

1 个答案: