- 締切済み
ｃｓｓでロールオーバーを作る時、<li>にidをふる理由
ナビゲーション部分などで、CSSでロールオーバーを作成する場合の質問です。 <ul> <li id="navi1"><a href="#">ナビ1</a></li> <li id="navi2"><a href="#">ナビ2</a></li> <li id="navi3"><a href="#">ナビ3</a></li> </ul> htmlでは上記のように記し、cssで #navi1 a{ display:block; ・ ・ ・ } #navi2 a{ display:block; ・ ・ ・ } というように表記しています。 参考書やネットで検索した際も上記のように書かれているのですが、 なぜ<li>にidを振るのでしょうか？ <a>にidを振る形は間違っているのでしょうか？ 初歩的な質問かもしれませんが、よろしくお願いします。
- HTML
- 回答数5
- ありがとう数10
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
すくなくとも、そのCSSの書き方やidの振り方は不適切そのものですね。 ＞参考書やネットで検索した際も上記のように書かれているのですが、 素人が、仕組みも理解せずに見よう見まねで紹介しているにすぎないです。そもそも、idも要らない場合もある。(classもなくてもコーディングできる) <ul id="nav"> <!-- このidはページの他の場所からリンクへたどりつくため、それが不要の場合はclassでよい --> <li><a href="#">ナビ1</a></li> <li><a href="#">ナビ2</a></li> <li><a href="#">ナビ3</a></li> </ul> CSSは ul#nav li a{display:block;} ですむ。同じプロパティを繰り返し記述するということは馬鹿げています。 たとえば <body> <div> <ul class="nav"><!-- (1) --> </ul> </div> <ul class="nav"><!-- (2) --> </ul> </body> このHTMLで、(1)のulは div ul.nav{}ですし (2)のulは body>ul.nav{} ・・・単にulとしたって、(1)と区別できるよね。 ul.nav{color:green} div ul.nav{color:red} としてテストしてごらんなさい。
- 藤田 朋郎（@hujitomo）
- ベストアンサー率54% (39/71)
＞<a>にidを振る形は間違っているのでしょうか？ 別に間違いではありません。自分の好きなように判断して構いません。 ただし皆が同じやり方をしている場合、なにかしらの理由（そのほうが便利だ、とか）がある場合が殆どです。 ちなみにこの場合は ＞CSSでロールオーバーを作成する場合 というのがポイント。CSS でロールオーバーを実装する場合 background 属性を利用して画像を表示させます。しかしながら <a> は非置換インライン要素。デフォルトではボックスのサイズを指定する事ができません。スタイルをいじれば <a> でもサイズを指定する事が可能になりますが、とりあえず CSS はシンプルであればあるほど良い。 そんな理由ではないでしょうか？
お礼
大変遅くなって申し訳ありません。 ご回答、ありがとうございました。 -------- CSS でロールオーバーを実装する場合 background 属性を利用して画像を表示させます。しかしながら <a> は非置換インライン要素。デフォルトではボックスのサイズを指定する事ができません。スタイルをいじれば <a> でもサイズを指定する事が可能になりますが、とりあえず CSS はシンプルであればあるほど良い。 -------- ということですが、<a>タグに背景画像と同じ大きさのヒットポイントを持たせようとすると、やはり<a>のスタイルをいじる必要はありますよね。 となると、やはりなぜ<li>にidをつけている人が多いのかが気になります。 ありがとうございました。
- LOHA
- ベストアンサー率52% (203/388)
ふらなければならないという事はありません。 ふる必要があるからそうしているだけです。 例えばメニュー項目でマウスホバーしたとき背景色を変えたる際、個別に違う背景色を指定したいなら、それぞれの要素ごとにスタイルを適用する必要があります。 その場合個別にid指定するのがスマートになるわけです。 質問の例だとdisplay:blockを毎回書いているようですが、私なら共通のスタイルはまとめて適用させますね（ulにidをつけて#hoge li a{ display: block; }的な感じ）。
お礼
大変遅くなって申し訳ありません。 ご回答、ありがとうございました。 そうなんです。ふる必要があるからふっているんです。 しかし、それがなぜ<li>であって<a>ではないのかが、気になっているんです。 <a>でも同じようにできるんです。 でも<a>に振っている人は見たことがないんです。 ＞私なら共通のスタイルはまとめて適用させますね（ulにidをつけて#hoge li a{ display: block; }的な感じ）。 そうですよね。ありがとうございます。 コピペしてしまって・・・申し訳ありません。 ありがとうございました。
- salonpath
- ベストアンサー率48% (194/399)
背景画像を使った画像置換をさせなければ別に必要ないと思いますけど idなりclassなりなんらかのユニークな印を付けなければ、個別でロールオーバーの画像を(cssのみで)指定できませんよね？ あとはaタグの親要素につけたほうがシンプルになるからじゃないでしょうか。
お礼
大変遅くなって申し訳ありません。 ご回答、ありがとうございました。 私の質問の仕方がちょっとわかりづらいですね・・・。 すみません。 ＞idなりclassなりなんらかのユニークな印を付けなければ、個別でロールオーバーの画像を(cssのみで)指定できませんよね？ そうです。おっしゃるとおりですね。 ＞あとはaタグの親要素につけたほうがシンプルになるからじゃないでしょうか。 やはりそんなかんじの理由なんでしょうかね・・・。 ありがとうございました。
- fujillin
- ベストアンサー率61% (1594/2576)
対象をどの要素にしたいかで、考え方が変わってくるだけでは？ ご提示のままだとあまり差が目立たないかもしれませんが、例えばli要素にpaddingを設定しておいて、background-colorを変えるとしたら、liとaの場合で動作する範囲も結果も違いがでると思いますけど？ ナビゲーションの場合、項目全体を対象としたいでしょうから、a要素だけでなくその項目としてhoverが効いたほうが自然ではないのでしょうか？ （a要素しかhoverが効かないブラウザもあるけど…）
お礼
大変遅くなって申し訳ありません。 ご回答、ありがとうございました。 項目全体ではありますが、結局 #navi1 a{ display:block; ・ ・ ・ } と指定するので、それなら<a>にidをつけて a#navi1 { display:block; ・ ・ ・ } としても一緒なのではないかとかんじているのです。 気にするほどのこともないことなんですかね・・・・。 ありがとうございました。
関連するQ&A
- １枚画像で作るCSSのナビゲーション・ロールオーバーが上手く動作しません。
はじめまして。初歩的な質問で非常に申し訳ないのですが 今日１日自力で頑張ってみたのですがどうしても解決できないので、ご教授いただけないかと思い書き込ませていただきました・・・・。 ナビゲーションメニューを作っているのですが、 １枚画像でロールオーバーという方法でやっています。 [やりたいこと] 「横978px 縦40pxの画像を使って ６つのメニューに分けて、ロールオーバーをしているようにみせる」 [うまくいかない事] ・横並びにしたいのに、なぜか画像が縦に６つ並んでしまっている状態。 ・最初の「home」以外が全くロールオーバーしてくれない・・・ どこかおかしなところがあれば教えてください・・ よろしくお願いいたします。 【HTML】 <div id="navigation"> <ul> <li id="bttop"><a href="#" title="Home">Home</a></li> <li id="btdai"><a href="#" title="menu1">menu1</a></li> <li id="btsyo"><a href="#" title="menu2">menu2</a></li> <li id="btweb"><a href="#" title="menu3">menu3</a></li> <li id="btmap"><a href="#" title="menu4">menu4</a></li> <li id="bttel"><a href="#" title="menu5">menu5</a></li> </ul> </div> 【CSS】 #navigation { position: absolute; width: 978px; } #navigation ul { width: 978px; height:40px; margin: 0; padding: 0; list-style: none; } #navigation li { margin: 0; padding: 0; width: 978px; height: 40px; text-indent: -9999px; } #navigation li a { width: 163px; height: 40px; text-decoration: none; display: block; float:left; } #navigation li#bttop { background: url(img/navi_bar.jpg) no-repeat 0px 0px; } #navigation li#btdai { background: url(img/navi_bar.jpg) no-repeat 163px 0px; } #navigation li#btsyo { background: url(img/navi_bar.jpg) no-repeat 326px 0px; } #navigation li#btweb { background: url(img/navi_bar.jpg) no-repeat 489px 0px; } #navigation li#btmap { background: url(img/navi_bar.jpg) no-repeat 652px 0px; } #navigation li#bttel { background: url(img/navi_bar.jpg) no-repeat 815px 0px; } /* マウスオーバー時の指定 ---------------------------------------------------- */ #navigation li#bttop a:hover { background: url(img/navi_bar.jpg) no-repeat 0px -40px; } #navigation li#btdai a:hover { background: url(img/navi_bar.jpg) no-repeat 163px -40px; } #navigation li#btsyo a:hover { background: url(img/navi_bar.jpg) no-repeat 326px -40px; } #navigation li#btweb a:hover { background: url(img/navi_bar.jpg) no-repeat 489px -40px; } #navigation li#btmap a:hover { background: url(img/navi_bar.jpg) no-repeat 652px -40px; } #navigation li#bttel a:hover { background: url(img/navi_bar.jpg) no-repeat 815px -40px; }
- 締切済み
- デザイナー・クリエイティブ職
- リストタグを横並びにする方
横並びのナビゲーションを作成するためにスタイルシートの解説本で調べて 【html】 <div id="navi"> <ul> <li><a href="toiawase.html">問い合わせ</a></li> <li><a href="accsess.html">アクセス</a></li> <li><a href="top.html">TOP</a></li> </ul> </div> 【css】 ul#navi li { float: right; } ul#navi li a { display: block; text-decoration:none; } と記述しましたがうまくできず、頭のulを取ったら出来ました。 タグの位置がセレクタの前と後では、どう違うのでしょうか？ また、ulを入れずに進めても問題ないでしょうか？
- ベストアンサー
- CSS
- CSS ロールオーバーの画像が表示されません
CSSでロールオーバーのメニューを作りましたが、 画像が表示されません…参考書どおりに作っているはずなのですが… どなたかお知恵をお貸しください。 【css】 .menu { width:860px; height:70px; margin-top:5px; } .menu #visamadhi a {background-image:url(navi-aboutvisamadhi.gif);} .menu #kirei a {background-image:url(navi-kireininaritai.gif);} .menu #manabi a {background-image:url(navi-manSabitai.gif);} .menu #shiritai a {background-image:url(navi-jibunshiritai.gif);} .menu #shouhin a {background-image:url(navi-shouhin.gif);} .menu ul { margin:0; padding:0; } .menu li {list-style-type:none; float:left;} .menu li a { display:block; width:160px; line-height:70px; border: 1px solid #D8D1AD; text-indent:-9999px; margin-right:5px; margin-left: 5px; overflow: hidden; } .menu li a:hover {background-position:0px -80px;} 【html】 <div class="menu"> <ul> <li id="#visamadhi"><a href="">Visamadhiとは</a></li> <li id="#kirei"><a href="">きれいになりたい</a></li> <li id="#manabi"><a href="">学びたい</a></li> <li id="#shiritai"><a href="">自分を知りたい</a></li> <li id="#shouhin"><a href="">商品を使いたい</a></li> </ul> </div> 実際に作成したcssを格納しました。 以下URLよりダウンロードしていただけるとありがたいです。 http://firestorage.jp/download/7ebe12eca202b26ce2171225270a8ffe53c820e9
- 締切済み
- HTML
- IE8でli:hoverが効かない
Window7 IE8を使っています。 ホームページにｃｓｓを使ったドロップダウンメニューを導入したいのですが、 li:hoverが効きません。 ｃｓｓかhtmlが間違っているのかと思い、念のためいろいろなサイトから ｃｓｓドロップダウンメニューの例文をもらってきて 書き込んでみましたが、どうしてもサブメニューが表示されません。 たとえば、 【css】 /* メインメニュー */ #menu ul { display:block; list-style-type: none; margin:0; padding:0; } /* サブメニュー1段目 */ #menu ul ul{ display:none; position:absolute; top:100%; left:0; } /* サブメニュー2段目以降 */ #menu ul ul ul { top:0; left:100%; } /* リスト */ #menu li { float:left; } #menu li li { clear:both; } #menu li:hover { position:relative; } #menu li:hover > ul { display: block; } 【html】 <body> <div id="menu"> <ul> <li><a href="#">menu1</a> <ul> <li><a href="#">submenu1</a></li> <li><a href="#">submenu2</a></li> <li><a href="#">submenu3</a> <ul> <li><a href="#">submenu3-1</a></li> <li><a href="#">submenu3-2</a></li> <li><a href="#">submenu3-3</a></li> </ul> </li> </ul> </li> <li><a href="#">menu2</a> <ul> <li><a href="#">submenu4</a></li> <li><a href="#">submenu5</a></li> </ul> </li> <li><a href="#">menu3</a> <ul> <li><a href="#">submenu6</a></li> <li><a href="#">submenu7</a></li> <li><a href="#">submenu8</a></li> <li><a href="#">submenu9</a></li> </ul> </li> </ul> </div> </body> メニューにカーソルをもってきても、 サブメニューが表示されません。 原因や回避方法を教えていただけないでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- CSSロールオーバーについて教えて下さい。
CSSで横並びのメニューを作っているのですが、背景はそのまま表示され、a:hover時の画像がFirfoxだとずれてしまい、IEだと正しく表示されます。 以下、CSSですが、どこがいけないのでしょうか？ ご教授お願いします。 #gnavi { width: 600px; margin: 0; padding: 0; } #gnavi ul, #gnavi ul li { float: left; list-style-type: none; } #gnavi ul { width: 600px; height: 80px; background: url(./img/gnavi/g_navi.jpg) no-repeat; } #gnavi ul li a { display: block; width: 120px; height: 80px; text-indent: -9999px; font-size: 0; line-height: 0; } #gnavi ul li.gn01 a.active, #gnavi ul li.gn01 a:focus, #gnavi ul li.gn01 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat: no-repeat; background-position: left bottom; } #gnavi ul li.gn02 a.active, #gnavi ul li.gn02 a:focus, #gnavi ul li.gn02 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat:no-repeat; background-position: -120px -80px; } #gnavi ul li.gn03 a.active, #gnavi ul li.gn03 a:focus, #gnavi ul li.gn03 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat:no-repeat; background-position: -240px -80px; } #gnavi ul li.gn04 a.active, #gnavi ul li.gn04 a:focus, #gnavi ul li.gn04 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat:no-repeat; background-position: -360px -80px; } #gnavi ul li.gn05 a.active, #gnavi ul li.gn05 a:focus, #gnavi ul li.gn05 a:hover { background: url(./img/gnavi/g_navi.jpg); background-repeat:no-repeat; background-position: -480px -80px; } ※メニューはw:600px h:160pxの画像にて背景を利用し各メニュー部分をスライドさせて表示をしようと考えております。 ※各メニューの大きさはw:120px h:80pxです。 以下、HTMLへのタグです。 <div id="gnavi"> <ul> <li class="gn01"><a href="#container" title="トップページ" class="active">トップページ</a></li> <li class="gn02"><a href="#container" title="サービス内容">サービス内容</a></li> <li class="gn03"><a href="#container" title="納品までの流れ">納品までの流れ</a></li> <li class="gn04"><a href="#container" title="会社概要">会社概要</a></li> <li class="gn05"><a href="#container" title="お問合せ">お問合せ</a></li> </ul> </div> 色々と試してはいるのですが、どうも表示が上手く行かず、もしかしたら自分で解決をしようと試み、初心？基本的なことを忘れて入るのではと思い、皆さんに構文を見て頂きご指摘を頂ければ幸いです。 どうぞ、宜しくお願いします。
- ベストアンサー
- HTML
- cssでロールオーバーを横並びにする記述方法のご教示をよろしくお願いい
cssでロールオーバーを横並びにする記述方法のご教示をよろしくお願いいたします。 htmlには以下の記述をしてあります。 ［html］ <div id="menu"> <ul> <li id="menu1"><a href="a/index.html" title="HOME" ></a></li> <li id="menu2"><a href="b/index.html" title="ホームページ製作"></a></li> <li id="menu3"><a href="c/index.html" title="ネットショツプ製作"</a></li> <li id="menu4"><a href="d/index.html" title="SNSサイト製作"></a></li> <li id="menu5"><a href="e/index.html" title="SEOプロモーション"></a></a></li> <li id="menu6"><a href="f/index.html" title="出版・印刷・その他"></a></a></li> <li id="menu7"><a href="g/index.html" title="お問合せ・御注文"></a></li> </ul> </div> ここまでは、出来たのですが、その後のcssでどのように記述をして良いのかわからなくなってしまいました。Okwave様で何度かご質問もさせて頂き、とてもためになるご教示も頂いたのですが、どうしてもうまくいかなく難議しているところで御座います。htmlの記述は上記のように出来たのですが・・・ 画像については、以下にアップしました。よろしかったら見てみてください。 http://desktop10.web.fc2.com/test.html どうか初心者の私にご教示のほどよろしくお願いいたします。
- ベストアンサー
- HTML
- CSSのロールオーバーがIEで崩れます
CSSのロールオーバーでメニューを制作しています。 背景画像のポジションを変えて、1枚の画像でロールオーバーさせるというよくあるものです。 Mac+Safari、Firefoxではきちんと表示されるのですが、 Win+IE7だと1枚の画像がそのまま表示されてしまい、ロールオーバーになりません。 （IE7しか自宅にないので他のバージョンのIEではどうなるかわかりません。） しかもline-height: 140%;という一行を削除したら1枚べろんと表示されていたところが半分程かくれました。 ロールオーバー自体でなく、他の部分がおかしいのでしょうか？ ちなみに元の画像の高さは20pxで、10pxの画像を上下につなげています。 タイトル画像が120x26で、その横に絶対配置で並べています。 ど素人が手打ちで書いた文章なのでお恥ずかしいのですが、 問題の部分のCSSとhtml、全体のCSS、を以下に載せておきますのでどうぞご教授ください。 （メニュー項目の数等一部省略しているところがあります。） よろしくお願い致します。 /*CSSの記述*/ body{ margin: 0px; text-align: center; } table,tr,td,p,ul,li,h1,h2,h3,h4,h5,h6,input,textarea { line-height; 140%; color: #696969; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 10pt; } div#wrapper{ width: 500px; margin: 40px auto; text-align: left; } div#header{ width: 100%; position: relative; margin-bottom: 30px; } ul#menu{ position: absolute; left: 150px; top: 10px; width: 350px; height: 10px; } ul#menu li{ float: left; height: 10px; margin-right: 15px; } ul#menu li a{ margin: 0; padding: 0; height: 10px; display: block; text-indent: -9999px; outline: none; background-repeat: no-repeat; } ul#menu li a:link, ul#menu li a:visited{ background-position: left top; } ul#menu li a:hover, ul#menu li a:active{ background-position: left bottom; } ul#menu li#top a{ background-image: url(../img/top.gif); width: 32px; } ul#menu li#about a{ background-image: url(../img/about.gif); width: 48px; } ul#menu li#pict a{ background-image: url(../img/pict.gif); width: 37px; } /*HTMLの記述*/ <div id="wrapper"> <div id="header"> <h1><IMG SRC = "タイトル画像" ALT = "" border="0"></h1> <ul id="menu"> <li id="top"><a href="top.html">top</a></li> <li id="about"><a href="about.html">about</a></li> <li id="pict"><a href="pict.html">pict</a></li> </ul> </div> ～略～ </div>
- ベストアンサー
- CSS
- CSSで画像１枚によるロールオーバー
CSSの勉強をしているのですが、Fire Fox2.0ではうまく表示されるのに対し、IE6,7では何も表示されず困っています。どこが間違っているのか教えて頂けませんでしょうか？よろしくお願い致します。 作っている物は以下の通りです。（すべて同じ階層にあります） --------------------------------------------------------------- navi.gif(100*30のメニューが横3縦2で300*30の１枚の画像) --------------------------------------------------------------- list.html（とりあえずメニュー１つだけです） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>リストお勉強</title> <link href="list1.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="globalnavi"> <ul> <li id="btn01"><a href="#">リスト１</a></li> </ul> </div> </body> </html> --------------------------------------------------------------- list.css /* CSS Document */ .globalnavi { width:300px; height:30px; margin:0px; padding:0px; text-align:left; } .globalnavi ul { margin:0px; padding:0px; } .globalnavi li { display:block; list-style-type:none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li a { display:block; list-style-type::none; float:left; width:100px; height:30px; margin:0px; padding:0px; background:url(navi.gif)no-repeat; text-indent:-9999px; } .globalnavi li#btn01{ width:100px; background-position:0 0; } .globalnavi li#btn01 a{ width:100px; } .globalnavi li#btn01 a:hover{ width:100px; background-position: 0 -30px; }
- ベストアンサー
- HTML
- 横並びのメニューにならない
初心者です。 dreamweaverで、メニューを横並びにしたいのですが、縦のままです。 <div id="#navi"> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="#">お支払・送料</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> という風に作って CSSが、 #navi { height: 30px; width: 750px; } #navi ul { list-style: none; } #navi li { display: inline; float: left; } #navi li a{ text-align: center; display:block; } としました。 どこが間違っているのでしょうか？ あるいは何か足りないのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- html,cssプルダウンメニューについて教えてください。
html,cssプルダウンメニューについて教えてください。 現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点が あり困っています。どなたか知識のある方、教えていただけると嬉しいです。 [問題点] オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の 高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。 (分かりにく表現で申し訳ありません） 出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の 上に重なって表示させたいと思っています。 対処法がお分かりになる方、教えて頂けると幸いです。 [html] <div id="main_menu"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu04.gif"></a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu05.gif"></a> <ul class="sub"> <li class="navi_menu1"><a href="#">サブメニュー 1</a></li> <li class="navi_menu1"><a href="#">サブメニュー 2</a></li> </ul> </li> </ul> </div> </div> [css] #navi { width:993; margin:0 auto; border:0px solid red; padding:0px 39px 0px 0px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { float: left; margin: 0; width:120px; } #navi li.navi_menu1{ float: left; margin: 0; width:140px; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 0px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } #navi ul.sub { background: #eeeeee; } #navi ul.sub li { padding:5px 0px 0px 0px; float: none; height:25; } #navi ul.sub li.navi_menu1 { float: none; height:25; width:180; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding:0px 0; border-top:0px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:0px solid #000099; } #navi li.navi_menu_on{ border:0px solid #000099;}
- ベストアンサー
- その他([技術者向] コンピューター)
お礼
ご回答ありがとうございます。 質問の仕方が悪かったみたいですね・・・。 そういうことではなくてですね、idをふっているのはあくまでふる必要がある場合の話しをしているからです。 （プロパティなんかは本題に関係なくてちょっと適当にコピペしたので、すいません。） そのidを上記のような場合なぜ<a>ではなく<li>につけるのか？ という質問なんです・・・。