0

新しいドロップダウン メニューを作成していますが、ネストされた UL を表示できないようです。

これは、[イベント] セクションにカーソルを合わせると機能しないテスト ページです。

html は次のとおりです。

<div class="menu clearfix">
      <ul class="menu dropdown dropdown-linear dropdown-columnar">
        <li class="community"><a class="events_link" href="/events/index.html">Events</a>
            <ul>
            <li><a href="./">Menu Subitem #1</a></li>
            <li><a href="./">Menu Subitem #2</a></li>
            <li><a href="./">Menu Subitem #3</a></li>
            <li><a href="./">Menu Subitem #4</a></li>
        </ul>
        </li>
    </ul>
  </div>

ネストされた ul の CSS は次のとおりです。

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}

ul.dropdown li {
 float: left;
 min-height: 1px;
 line-height: 1.3em;
 vertical-align: middle;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

負荷があるため、すべてを投稿しませんでしたが、残りを確認するためにインスペクタを使用する必要がある場合はお知らせください..

どんな助けでも大歓迎です。

4

2 に答える 2

0

overflow:hiddenfromを削除/変更する必要がありますheader-wrapper。子コンテンツ（メニュー）は技術的にオーバーフローしたコンテンツであるため、非表示になっています。

于 2012-12-04T20:06:15.457 に答える
0

width ti li 要素を追加しないと発生する可能性がありますか? 試す：

width:100px;

これを見てくださいhttp://jsfiddle.net/brightlycolor/ktxHm/11/これはうまくいきます

于 2012-12-04T19:48:55.050 に答える