プルダウンメニューのcurrentの使い方

質問

こんばんは。初心者で質問自体説明不足かもしれませんが、
どなたかご教授願えたら幸いです。

ＣＳＳでサイトを制作しており、ほぼＣＳＳでできる横型プルダウンメニューを設置しました。
以下の様に「current」を使用して現在ページのメニューボタンの色を変えているのですが、

<ul>
<li class="current"><a href="#">menu</a>
<ul>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
</ul>

上記のプルダウンメニューだと、入れ子の子メニューにも「current」
が適用されて、一緒に色が変わってしまいます。

親メニューのボタンの色だけを変えて、
子メニューの色まで変えない事はできるのでしょうか・・・。
ちなみに、currentで表示させる色と、子メニューのロールオーバー時の色は一緒です。

説明不足ですみませんが、どうぞよろしくお願い致します。

回答No.2

ORUKA1951 · ベストアンサー

とりあえず、子供セレクタを理解しない古いブラウザ対応。
子供セレクタ対応のモダンブラウザなら、直接指定すると簡単です。
要は、詳細度をきちんと計算すること--常識的な結果ですが---
★リキッドデザインでデザインしてあります。
★タブは＿に置換してある。

<div class="nav">
＿<ul>
＿＿<li><a href="./">トップ</a></li>
＿＿<li class="current"><a href="./product">製品</a>
＿＿＿<ul>
＿＿＿＿<li><a href="./product/a">A群</a></li>
＿＿＿＿<li><a href="./product/b">B群</a></li>
＿＿＿＿<li><a href="./product/c">C群</a></li>
＿＿＿</ul>
＿＿</li>
＿＿<li><a href="./service">サービス</a>
＿＿＿<ul>
＿＿＿＿<li class="current"><a href="./service/a">A群</a></li>
＿＿＿＿<li><a href="./service/b">B群</a></li>
＿＿＿＿<li><a href="./service/c">C群</a></li>
＿＿＿</ul>
＿＿</li>
＿＿<li><a href="./profile">会社</a></li>
＿＿<li><a href="./mail">メール</a></li>
＿</ul>
</div>

div.nav{width:80%;height:34px;margin:0 auto;text-align:center;line-height:30px;}
div.nav ul,div.nav ul li{display:block;list-style:none;margin:0;padding:0;}
div.nav ul li{float:left;width:19%;}
div.nav ul li ul li{float:none;width:100%;}
div.nav ul li a{
display:block;width:100%;height:100%;
text-decoration:none;
background-color:yellow;
border:outset 2px silver;outline:none;
} /* 詳細度 0014 */
div.nav ul li a:hover{background-color:rgb(255,255,200);}/* 詳細度 0024 */
div.nav ul li.current a{background-color:red;} /* 詳細度 0024 */
div.nav ul li.current a:hover{background-color:rgb(255,200,200);} /* 詳細度 0034 */
div.nav ul li.current ul li a{background-color:yellow;} /* 詳細度 0026 */
div.nav ul li.current ul li a:hover{background-color:rgb(255,255,200);}/* 詳細度 0036 */
div.nav ul li ul{display:none;}
div.nav ul li a:active{border-style:inset;}
div.nav ul li:hover ul{display:block;}

お礼

お忙しい中ありがとうございました！
こんなに詳細にご説明くださり恐縮です・・・（涙）。
見よう見まねでＣＳＳを追加してみました所、思い通りの結果となりました。
まだまだ内容を理解できていない部分もあり、自分のものにできていないので、後日しっかり内容を確認して勉強させていただきます！
初めてプルダウンに挑戦して、このプルダウンが最後の問題だったので、本当に助かりました（涙）大変勉強になりました。ありがとうございました！

回答No.1

sagamit

こんな要領でいかがでしょう。

.current {
background-color: red;
}

.current > ul {
background-color: blue;
}

.current > ul > li:hover {
background-color: red;
}

お礼

お忙しい中ありがとうございました！
まだまだ勉強不足ですぐには応用して活用できずにおりますが（汗）こういう方法もあるのですね。
次回、ＣＳＳ組みなおしてやってみます！
大変勉強になりました！ありがとうございました☆