人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

/* ナビゲーション
---------------------------------------------*/
#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;

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

●質問者: mika555
●カテゴリ:インターネット ウェブ制作
✍キーワード:.jpg :hover background-color background-image COLOR
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● kakicg
●60ポイント ベストアンサー

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の表記の仕方がよくわかっていませんでした。大変勉強になりました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ