画像置換を用いた横型メニュー rev.2

@charset "UTF-8"; /* 文字コード宣言 */

a {
  text-decoration: none;
}
* {
  background-repeat: no-repeat;
}

ul#imageReplacing {
  overflow: hidden;
  list-style: none;
  width: 604px; height: 30px;
  padding: 0px; margin: 20px;
  font-size: 14px;
  border-style: solid none double solid;
  border-color: #46251A;
  border-width: 1px 0px 3px 1px;
  /*position: absolute; top: 300px; 絶対配置でも問題なし*/
}

#imageReplacing li {
  float: left;
  overflow: hidden;
  width: 150px; height: 30px; /* 画像の大きさ */
  border-right: 1px solid #46251A;
  position: relative;
}
#imageReplacing li a {
  height: 30px;
  width: 150px;
  overflow: hidden;
  display: block;
  background-color: #FFF1CC;
}
#imageReplacing li a:hover, 
#imageReplacing li a:focus, 
#imageReplacing li a:active {
  background-color: #F4EFCA;
}
#imageReplacing li a:before {
  display: block;
  float: left;
  color: #333333;
}
/* IE6 に以下のプロパティが適用されるとうまく動かないため子選択セレクタ ">" で IE6 には
  認識されないようにする */
#imageReplacing li>a:hover:before, 
#imageReplacing li>a:focus:before, 
#imageReplacing li>a:active:before {
  margin-left: -150px;
  /*position: absolute; /* IE 8 用: この指定をしないと margin-left: -150px; が有効にならない？ 
    が、Opera ではこの指定をするとキーボードでの選択時に、領域が左に 150px 大きくなってしまう.
    よって条件付コメントで IE 8 にのみ適用 */
}
/* "home" ボタン設定 */
#imageReplacing li.home a:before {
  content: url("ir_home.png");
}
/* "about" ボタン設定 */
#imageReplacing li.about a:before {
  content: url("ir_about.png");
}
/* "sample1" ボタン設定 */
#imageReplacing li.sample1 a:before {
  content: url("ir_sample1.png");
}
/* "sample2" ボタン設定 */
#imageReplacing li.sample2 a:before {
  content: url("none.png");
}

@charset "UTF-8"; /* 文字コード宣言 */

#imageReplacing li a:hover:before, 
#imageReplacing li a:focus:before, 
#imageReplacing li a:active:before {
  position: absolute; /* この指定をしないと margin-left: -150px; が有効にならない？ 
    が、Opera ではこの指定をするとキーボードでの選択時に、領域が左に 150px 大きくなってしまう.
    よって条件付コメントで IE 8 にのみ適用 */
}

@charset "UTF-8"; /* 文字コード宣言 */

#imageReplacing li a { /* IE 7 用 */
  display: list-item;
  list-style: disc inside; /* none を設定すると画像も表示されなくなる. */
  vertical-align: bottom;
  line-height: 31px; /* 画像が非表示の場合の文字の位置調節. 画像の高さより 1px 大きめに設定 */
  margin-left: -300px;
  padding-left: 300px;
}
#imageReplacing li a:hover, 
#imageReplacing li a:focus, 
#imageReplacing li a:active {
  background-position: -150px 0px;
}

#imageReplacing li.home a {
  background-image: url("ir_home.png");
  list-style-image: url("ir_home.png");
}

#imageReplacing li.about a {
  background-image: url("ir_about.png");
  list-style-image: url("ir_about.png");
}

#imageReplacing li.sample1 a {
  background-image: url("ir_sample1.png");
  list-style-image: url("ir_sample1.png");
}

#imageReplacing li.sample2 a {
  list-style-image: url("none.png");
  background-image: url("none.png");
}