css - 创建css菜单时无法悬停子菜单

Question

我正在尝试使用以下结构创建简单的 CSS 菜单：

<section id="navigation-bar" class="container">
    <nav class="pull-left">
        <ul class="multiColumnMenu">
            <li>
                <a href="#">Menu 1</a>
                <div class="column-menu">
                    <ul>
                        <li> Sub menu 1 </li>
                        <li> Sub menu 2 </li>
                        <li> Sub menu 3 </li>
                        <li> Sub menu 4 </li>
                        <li> Sub menu 5 </li>
                    </ul>
                </div>                          
            </li>
        ...
        </ul>
    </nav>
</section>

我用这个 css 触发菜单

.multiColumnMenu > li:hover  .column-menu{
    display: block;
}

菜单出现了，但我无法将鼠标悬停在它上面。当我将鼠标悬停在它上面时，它就会消失。

演示

Answer 1

它是margin-top内部.column-menu导致它在您悬停之前消失（由于元素之间的物理间隙，:hover状态丢失） - 删除它并且它工作正常。

jsFiddle在这里。

Answer 2

快速简便的修复，但我不认为这正是您想要完成的方式是完全关闭您的 margin-top: 8px。这将使您的下拉菜单起作用。请参阅下面的代码

 .column-menu {
display: none;
left: 5px;
margin-top: 0px;
width: 300px;
height: 200px;
color: #7B0000;
background: rgb(252, 252, 252);
border: 1px #ccc solid;
border-bottom: 3px #ccc solid;
position: absolute;
z-index: 20;
  }