2

次の構造を持つ単純な 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;
}

メニューが表示されますが、カーソルを合わせることができません。ホバーすると消えます。

デモ

4

2 に答える 2

4

ホバーする前に消えるのはmargin-top内部.column-menuです（要素間の物理的なギャップにより、:hover状態が失われます）-それを削除すると、正常に機能します。

ここでjsFiddle。

于 2013-05-14T13:38:38.440 に答える
0

迅速かつ簡単な修正ですが、これがまさにあなたがやりたいことだとは思いませんが、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;
  }
于 2013-05-14T13:44:56.217 に答える