0

アクティブまたは現在のときに親と子のナビゲーションメニューを強調表示する方法を教えてください。子ページが選択されているときに親メニュー項目を強調表示することはできますか? 私が達成しようとしているのは、http: //www.brotfabrik-berlin.de/ のようなものです。サブページにカーソルを合わせると、親が強調表示され続けます。ありがとうございました。

#menu {
font-weight:700;
list-style:none;
width:990px;
margin:0px auto 0px auto;
height:29px;
padding:0px 0px 0px 0px;

/* Rounded Corners */

-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;

/* Background color and gradients */

background: #014464;
background: -moz-linear-gradient(top, #, #);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#), to(#));

/* Borders */

border: 1px solid #002232;

-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;

#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 5px 4px 5px;
margin-right:0px;
margin-top:0px;
border:none;
z-index: 1;

#menu li:hover {
border: 1px solid #777777;
padding: 2px 4px 4px 4px;

/* Background color and gradients */

background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

/* Rounded corners */

-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;

#menu li a {
font-family:Arial Narrow;
font-size:15px; 
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 0px 0px 0px #000;

#menu li:hover a {
color:#161616;
text-shadow: 0px 0px 0px #ffffff;
4

1 に答える 1

0

私は通常、ナビゲーション リンクの にcurrentクラスを追加することでこれを実現します。<li>したがって、ナビゲーション コードを表示している場合は、次home.htmlのようになります。

<ul id="menu">
    <li class="current"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Another page</a></li>
</ul>

次に、リンクのホバー スタイルを使用して現在のクラスのスタイルを設定します。または、別のスタイルを定義することもできます。次に例を示します。

#menu li.current a {
    font-weight: bold;
}

<li>にサブメニュー (別の) が含まれている場合、次の<ul>ように CSS をターゲットにします。

#menu > li > a {
    /* this would target the parent link */
}

サブメニューのリンクをターゲットにするには、次のようにします。

#menu ul ul a {
    /* this would target submenu links */
}
于 2012-10-28T02:49:49.453 に答える