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;
}

菜单显示但我不能将鼠标悬停在它上面。当我将鼠标悬停在它上面时，它会消失。

Demo

Answer 1

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

jsFiddle here.

Answer 2

快速简单的修复，但我不认为这正是你想要做的就是把你的保证金最高点：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;
  }

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

2 个答案: