2

CSSドロップダウンメニューには次のマークアップがあります。

<ul>
    <li><a>FieldOne LevelOne</a></li>
    <li><a>FieldTwo LevelOne</a></li>
    <li><a>FieldThree LevelOne</a>
        <ul>
            <li><a>FieldOne LevelTwo</a>
                <ul>
                    <li><a>FieldOne LevelThree</a></li>
                    <li><a>FieldTwo LevelThree</a></li>
                </ul>
            </li>
            <li><a>FieldTwo LevelTwo</a>
                <ul>
                    <li><a>FieldOne LevelOn</a></li>
                </ul>
            </li>
       </ul>
  </ul>

そして次のCSS：

ul ul {
    display: none;
}

ul li {
    list-style: none;
}

ul li:hover > ul {
    display: block;
}

ul
{
    background: #76b800;
    padding: 0 20px;
    margin-left: 5px;
    border-radius: 10px;
    list-style: none;
    position: relative;
    display: inline-table;
}

ul:after {
    content: ""; clear: both; display: block;
}

ul li {
    float: left;
    min-width: 140px;
    text-align: center;
    vertical-align: bottom; 
}

ul li:hover {
    background-color: #4478B7;
}

ul li a
{
    display: block;    
    padding: 10px 40px 10px 40px;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

ul ul {
    background: #4478B7; 
    padding: 0;
    position: absolute; 
    top: 100%;
    z-index: 5;
    margin: 0;
}

ul ul li
{
    float: none;
    border-top: 1px solid;
    border-bottom: 1px solid;
    position: relative;
    border-style: solid;
    border-width: 1px;
    border-color: #88AAD2 white #335B8C white;
}

ul ul li:hover
{
    background-color: #396599;
    background-image: none;
}

ul ul li a {
    color: #fff;
    min-width: 140px !important;
    padding: 10px 40px 10px 40px !important;
    font-size: 16px !important;
}   

ul ul li a:hover {
    background: #233F61;
}

ul ul ul {
    position: absolute; 
    left: 100%; 
    top:0;
}

問題：第2レベルに移動し、LIにカーソルを合わせると、第3レベルのリストが表示されます。2番目のレベルで1つのLIから別のLIに移動すると、最初のLI内にネストされた3番目のレベルのリストが消え、2番目のレベル内にネストされたリストが表示されます（存在する場合）。

しかし

代わりに、第2レベルのメニュー内を移動して第3レベルのメニューを非表示にせずに、第2レベルのリストを完全に終了した場合、第2レベルのメニューを再リストすると、最後に表示された第3レベルのメニューが横に表示されます。そのLIですが、コンテンツはありません（Asからのテキストはありません）。リストは、ホバーされていないかのようにスタイルで表示されます。

ここで効果を確認できます：http：//jsfiddle.net/JE8ZM/。IE9またはChromeで実行すると、機能します。ただし、IE7で実行する場合は、FieldOne LevelTwoに移動し、その上にカーソルを合わせて、表示された第3レベルのメニューに入らずに左側を離れてください。次に、FieldThree LevelOneにカーソルを合わせて、意味を確認します。

ありがとう。

4

1 に答える 1

1

ネストされたサブ ナビゲーション メニューは、Javascript や jQuery を使用しないとクロス ブラウザーで動作させるのが非常に難しいことで知られています。これは、私が知っている中であなたの問題を解決する最高の「純粋な CSS」リソースです!

http://www.cssplay.co.uk/menus/final_drop2.html

于 2012-10-19T20:53:21.140 に答える