1

別の親メニュー項目をロールオーバーするとサブメニューが表示される典型的な CSS トップ ナビゲーションがあります。アクティブなサブメニューを表示し続けるようにコードを変更するにはどうすればよいですか。そのため、その親メニュー項目またはその子のページにいる場合、別の親メニュー項目にカーソルを合わせない限り、そのサブメニューが表示されたままになります。

コードへの jsfiddle リンクは次のとおりです: http://jsfiddle.net/cgzUm/

コード自体:

<div id="topbar">
<div id="navbar">
    <div class="elements">
        <ul>
            <li id="menua"><a href="#">Menu A</a>
                <div class="subnavbar">
                    <ul>
                        <li><a href="#">Submenu A1</a></li>
                        <li><a href="#">Submenu A2</a></li>
                        <li><a href="#">Submenu A3</a></li>
                    </ul>
                </div>
            </li>
            <li id="menub"><a href="#">Menu B</a>
                <div class="subnavbar">
                    <ul>
                        <li><a href="#">Submenu B1</a></li>
                        <li><a href="#">Submenu B2</a></li>
                        <li><a href="#">Submenu B3</a></li>
                    </ul>
                </div>
            </li>
            <li id="menuc"><a href="#">Menu C</a>
                <div class="subnavbar">
                    <ul>
                        <li><a href="#">Submenu C1</a></li>
                        <li><a href="#">Submenu C2</a></li>
                        <li><a href="#">Submenu C3</a></li>
                    </ul>
                </div>
            </li>
            <li id="menud"><a href="#">Menu D</a>
                <div class="subnavbar">
                    <ul>
                        <li><a href="#">Submenu D1</a></li>
                        <li><a href="#">Submenu D2</a></li>
                        <li><a href="#">Submenu D3</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

そしてCSSコード：

#navbar { position: relative; width: 990px; height: 40px; z-index: 12; margin: 0px auto; }
#navbar .elements { display: inline; float: left; position: relative; width: 100%; height: 100%; text-align: center; margin: 0px; padding: 0px; text-align: center; }
#navbar .elements > ul { clear: left; display: inline; float: left; position: relative; left: 50%; height: 40px; margin: 0px; padding: 0px; list-style-type: none; margin: 0px; }
#navbar .elements > ul > li { display: inline; float: left; position: relative; right: 50%; text-transform: uppercase; margin: 0px; padding: 10px 0px 5px 0px; height: 25px; font-size: 14px; }
#navbar .elements > ul > li > a { display: block; color: #002B55; overflow: hidden; font-size: 12px; font-weight: 700; text-decoration: none; height: 25px; line-height: 25px; padding: 0px 25px; margin: 0px; }
#navbar .elements a:hover, #navbar .elements li a.selected { color: #0073AE; }
#navbar .elements > ul > li:hover .subnavbar { display:block; }
#navbar .elements > ul > li > a:active .subnavbar { display:block; }
#navbar .subnavbar { position: fixed; width: 100%; height: 27px; top: 40px; left: 0px; background-color: #FFF; border-top: 1px solid #2B2B2B; text-align: center; margin: 0px; padding: 0px; overflow: hidden; z-index: 13; display: none; }
#navbar .subnavbar.over { display: block; padding-bottom: 7px; }
#navbar .subnavbar ul { height: 27px; z-index: 5; list-style-type: none; margin: 0px auto; padding: 0px; }
#navbar .subnavbar ul li { display: inline; text-transform: uppercase; }
#navbar .subnavbar ul li a { text-decoration: none; line-height: 27px; font-size: 12px; padding: 7px 8px 7px 9px; color: #002B55; }
#navbar .subnavbar ul li a:hover { color: #0073AE; }
#navbar .subnavbar ul li a.selected { color: #0073AE; }
#navbar .selected .subnavbar { z-index: 12; }
#navbar ul > li.selected div.subnavbar { display: block; }
#navbar .elements > ul > li { padding-bottom: 6px; }
4

1 に答える 1

1

まず、次のように、アクティブなメニュー項目である li に class="active" を追加します。

<li id="about" class="active"><a href="/wordpress/about">About</a>

次に、次の CSS 行を追加します。

#navbar .elements > ul > li.active .subnavbar { display:block; z-index:1; }

これで z-index を更新します。

#navbar .elements > ul > li:hover .subnavbar { display:block; z-index:2;}

jsFiddle: http://jsfiddle.net/cgzUm/4/

于 2013-08-29T18:49:13.163 に答える