0

「サブメニュー」を表示するために、CSS でどのセレクターまたはセレクター階層を使用する必要があるかを判断するのに少し苦労しています。

a:link完全に別の<nav>内でのホバリングに基づいてサブメニューを表示したい<ul>.

その効果を得るためにCSSを書く方法がわかりません

HTML

<div class="row">
    <nav id="nav" class="nav-holder">
        <ul id="nav" class="menu">
            <li><a href="#">Links!</a></li>
            <li><a href="#">Links!</a></li>
            <li><a href="#">Links!</a></li>
            <li><a href="#">Links!</a></li>
            <li><a href="#">Links!</a></li>
            <li><a href="#">Links!</a></li>
        </ul>
    </nav>
    </div>
    <div class="cleared"></div>

    <div class="row">
        <div class="submenunav"></div>
    </div>

間違ったCSS

.submenunav { display:none;}

#nav ul#nav li a:hover .submenunav {
   position:absolute;
   z-index:500;
   display:block;
   margin:0px;
   padding:0px;
   width:940px;
   height:200px;
   background:#E9EAEE;
   border-bottom:9px #67B7E1 solid;
   box-shadow:0 8px 6px -6px black;
}​

私のフィドル - http://jsfiddle.net/NVwks/

a:links最終的には固有のサブメニューに固有のクラスを与えることになりますが、望ましい効果は、サブメニュー ブロックが任意のリンクにカーソルを合わせることに基づいて表示されることです。

どうもありがとう。

4

1 に答える 1

2

ここでの問題は、a:link要素が要素内に含まれてnavいることです。これは、あなたが言うように、表示するサブメニュー要素とは完全に分離されています。:hover構造内のこの分離により、他の CSS セレクターだけで実現することは不可能になります。

マークアップを再構築する余地はあまりないように思われるため、必要な機能を実現するにはスクリプトを使用する必要があるかもしれません。

于 2012-10-18T15:36:07.473 に答える