/* ナビゲーション

---------------------------------------------*/
#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: MS Pゴシック", 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

ベストアンサー

id:kakicg No.1

kakicg回答回数44ベストアンサー獲得回数32008/12/22 13:13:31

ポイント60pt

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">メニュー1</li>
<li id="menu2">メニュー2</li>
<li id="menu3">メニュー3</li>
(以下同様)
id:mika555

ありがとうございます。

idの表記の仕方がよくわかっていませんでした。大変勉強になりました。

2008/12/23 09:36:10

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

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

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

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

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません