css　でのプルダウン子階層の色について

締切済

質問者：space283
質問日時：2012/03/31 14:03
回答数：2件

こんばんは。初心者で質問自体説明不足かもしれませんが、
どなたかご教授願えたら幸いです。
前回も似たような内容で教えていただいたんですが、
知識不足で少し変わると応用する事ができず、困っております（涙）

ＣＳＳでサイトを制作しており、ＣＳＳでできる、
画像を使用した横型プルダウンメニュー（プルダウンは縦）を設置しました。

表示中のページがわかるように、
以下の様に、bodyにidをつけて、bacground-positionをマイナスして画像の下側を
表示させているのですが、子メニューが親メニューと一緒にpositionがマイナス
されて、current時のボタン表示になってしまいます。

******************************************
<body id="01">

<menu>
<ul>
<li id="menu1"><a href="#">menu</a>
<ul>
<li id="submenu1"><a href="#">submenu</a></li>
<li id="submenu2"><a href="#">submenu</a></li>
</ul>
</li>
</ul>
</menu>
</body>

--------css----------------------------

#menu {width:835px; ～(etc)}

#menu #menu1 a {background-image:url(image/***.jpg);width:65px;}
#menu #submenu1 a {background-image:url(image/***.jpg);width:65px;}
#menu #submenu1 a {background-image:url(image/***.jpg);width:65px;}

#menu #current a {background-position:0 -40px;}

#p01 #menu #menu1 a {background-position:0 -40px;}

******************************************************

親メニューのボタンだけのpositionをマイナスにして、
子メニューは適用しない方法を教えて頂けますでしょうか・・・。

また、子メニューの方にも表示中のページをわかるようにするには、
どこにどのような記述をすればよかったでしょうか？

上記のソースに何か追加や修正をしてできるものがあれば、
大変助かります。
説明不足ですみませんが、どうぞよろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2012/04/02 01:00

＞上記のソースに何か追加や修正をしてできるものがあれば、

不可能です。<menu>は、典型的な非推奨要素で、使うべきではありませんし、また決して<ul>と同居はしません。<menu>内には<ul>は入れられません!!!入るのは<li>のみです。本来<menu>は、内容の<li>をひとつの段落--改行なし---でレンダリングされるように計画されましたが、実際にはどのブラウザも<ul>と同じようにレンダリングします。
＞current時のボタン表示になってしまいます。
　currentを示すclass名がついていないので、いずれにしてもそのままのHTMLでは無理です。

　#は一意セレクタと呼ばれるセレクタでひとつの文書内に一箇所しか存在し得ないし、詳細度も高いので、子孫セレクタとして記述する必要は基本的にありません。

　以前も回答しましたが、HTMLは
<div class="nav">
　<ul>
　　<li><a href=""></a>
　　　<ul>
　　　　<li><a href=""></a></li>
　　　　<li class="current"><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　</ul>
　　</li>
　　<li><a href=""></a>
　　　<ul>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　　<li><a href=""></a></li>
　　　</ul>
　　</li>
　</ul>
</div>
　などになります。子供セレクタ>を使うと簡単なのですが、子供セレクタに対応していないIE6など古いブラウザを考えると、子孫セレクタで区別することになります。

　ここで、
div.nav ul,div.nav ul li{display:block;list-style:none;margin:0;padding:0;line-height:30px;text-align:center;}
/* すべての ul,liタイプをpadding,marginのないblockにしておきます。あわせてline-height,text-alignを指定しておく */
/* line-height,text-alignは継承されるプロパティ */

div.nav ul{width:100%;position:relative;}
/* div.nav の子孫であるul--すなわち順不同リストA,B,Cすべてに適用されます。詳細度[0,0,1,,]*/
/* div.nav>ul--子供セレクタを使うと順不同リストAのみ適用される -->
/* relativeは、その子孫要素の巾の基準とするため */
div.nav ul li{width:20%;float:left;position:relative;}
/* リストを横並びさせる詳細度[0,0,1,2] */
/* この時点では、項目a-hすべてに適用される */

div.nav ul li a{display:block;width:100%;height:100%;background-image:url();}
/* a要素をblockに変更してrelativeされている親要素のサイズを基準にheightとwidthを指定 */

div.nav ul li ul li{width:100%;float:none;}
/* 二階層目のliについての設定詳細度が[0,0,1,5]なので上書きされる */
/* この設定は項目b-d,f-gにのみ適用される */

div.nav ul li ul li a{background-position:0 -40px;}

div.nav ul li ul{display:none;}
/* 二階層目を消す詳細度[0,0,1,4] */
div.nav ul li:hover ul{display:block;}
/* 二階層目を見せる。擬似クラスを使っているので詳細度[0,0,2,4]で上書きされる */

div.nav ul li ul li.current a{}
/* 詳細度[0,0,2,6] */

　このように、より詳しく記述された要素--より高い詳細度での指定が優先されていきます。 */

　HTMLもCSSも、ここで説明するにはあまりにも多すぎますが、いずれにしろ、仕様書には正確で的確な記述があります。必ず一度は目を通しておきましょう。前回の回答でも、きちんと説明してあったはずです。
★HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
★REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
　→5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
　→6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2 … )
　なお、詳細度については現行のCSS2.1では変更になっています。
　　→6.4.3 Calculating a selector's specificity ( http://www.w3.org/TR/CSS2/cascade.html#specificity )

- 0
- 件

通報する

この回答へのお礼

こんにちは。前回に続き、お親切な回答をいつもありがとうございます（涙）
まず、やっぱり基本的な知識がなっていないのですね・・・。
2010年に発行になっているある書籍を忠実に、多少（勝手な）アレンジを加えて作ったのですが、それ自体危ういのでしょうかね（汗）
まだ、こんなに詳しく説明して頂いても、1つの書籍に頼って応用不足の為、今までやってきた記述と違うと「？」になる所が多々あるので、教えて頂いたリンク先をよく読ませて頂いて、今後の為にもORUKA1951さんのソースをしっかり理解したいと思います。プリントアウトして、勉強させて頂きます（笑）
本当にいつも、詳しくご説明頂き、感謝致します・・・。

通報する

お礼日時：2012/04/03 07:48

No.1

回答者： ORUKA1951
回答日時：2012/03/31 17:08

<body>

<div class="nav">
<ul>
　　<li><a href="#">menu</a>
　　　　<ul>
　　　　　　<li><a href="#">submenu</a></li>
　　　　　　<li><a href="#">submenu</a></li>
　　　　</ul>
　　</li>
　　<li><a href="#">menu</a>
　　　　<ul>
　　　　　　<li><a href="#">submenu</a></li>
　　　　　　<li><a href="#">submenu</a></li>
　　　　</ul>
　　</li>
</ul>
</div>
</body>

　HTMLはこれだけで必要十分です。

#menu #submenu1のような書き方はしません。一意セレクタの対象となるIDは、ページ内の一箇所しか存在し得ないので、子孫セレクタで示す必要はありません。