/* ナビゲーション

Question

mika555

144

138もっと見る

60pt

インターネットウェブ制作

/* ナビゲーション

---------------------------------------------*/
#navigation {
position: relative;
top: 0px;
left: 0px;
width: 706px;
Z-index: 100;
}
#navigation ul {
margin: 0;
padding: 0;
list-style: none;

}
#navigation li {
float: left;
height: 25px;
width: 174px;
margin: 0;
list-style-type: none;

}
#navigation li a {
display: block;
width: 100%;
padding: 4px 0;
text-align: center;
font-family: ＭＳＰゴシック", Osaka, "ヒラギノ角ゴ Pro W3" "sens-serif;
font-weight: bold;
color: #333333;
text-decoration: none;
background-color: #FFFFCC;
background-image:url(../img/h2_bg.jpg);

}
#navigation li a:hover {
color: #EC8602;

}
で、定義したナビゲーションバーの中のメニュー毎に背景画像を変えたいのです。
記述方法がわかならいので教えていただけると助かります。

回答の条件

URL必須
1人2回まで

登録：2008/12/22 11:49:40
終了：2008/12/23 09:46:15

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

コメントはまだありません

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

リクエスト送信済

回答リクエストを送信したユーザーはいません

kakicg · Accepted Answer · 2008-12-22T13:13:31+09:00

http://q.hatena.ne.jp/

#navigation li#menu1 a {
  background-image:url(../img/menu1_haikei.jpg);
}
#navigation li#menu2 a {
  background-image:url(../img/menu2_haikei.jpg);
}
#navigation li#menu3 a {
  background-image:url(../img/menu3_haikei.jpg);
}
(以下同様)

のようなcssコードを追加します。

該当する各liには対応するidを追加します。

<li id="menu1">メニュー１</li>
<li id="menu2">メニュー2</li>
<li id="menu3">メニュー3</li>
(以下同様)

/* ナビゲーション

ベストアンサー

kakicg4432008/12/22 13:13:31

コメント（0件)

この質問への反応（ブックマークコメント）