46

view

HTMLも載せていただきたいところ…。ちなみに、li要素にはデフォルトでmargin,paddingが入れられています。ul,olを使用するとはじめから隙間ができるようになっているのと同じようにです。(詳しくは覚えてませんがFirefoxだとmargin、IEだとpaddingだったかな)

li {
margin:0;
padding:155px 0 0 0;
}

のように不必要でも右、下、左に0を指定したほうが良いでしょう。

- - - - - - - - - - - - - - - - - - - -

HTMLは…

<ul id="globalnavi>
<li id="menu1"><a href="#">about</a></li>
<li id="menu2"><a href="#">menu</a></li>
<li id="menu3"><a href="#">blog</a></li>
<li id="menu4"><a href="#">party</a></li>
<li id="menu5"><a href="#">mail</a></li>
</ul>

こんな感じですか？

- - - - - - - - - - - - - - - - - - - -

ロールオーバーの仕組みは下のような感じでしょうか。
あまり見たことのない仕組みですね…。
私だったら次のようにCSSを書きます。

ul#globalnavi {
margin:0;
padding:155px 0 0 0;/*やぶれた紙の上の余白155pxと考えました*/
list-style:none;
width:310px;
background:url(img/side.jpg) left top no-repeat;/*やしの木ややぶれた紙などが書かれた背景をside.jpgとしました*/
}
ul#globalnavi li {
margin:0;
padding:0;
width:310px;
height:31px;
border-bottom:solid 1px black;/*私的にはここに真っ黒の線はマッチしないと思います*/
}
ul#globalnavi li a {
display:block;
width:310px;
height:31px;
text-indent:-999em;
}
/*ここから下はaboutなどの文字画像の切替を指定します*/
/*side2.jpgは下の画像のようなabout,menuなどが書かれた画像です*/
ul#globalnavi li a {
background-image:url(img/side2jpg.);
background-repeat:no-repeat;
}
/*画像の座標はテキトーです*/
ul#globalnavi li#menu1 a {
background-position:0px 0px;
}
ul#globalnavi li#menu1 a:hover {
background-position:311px 0px;;
}
ul#globalnavi li#menu2 a {
background-position:0px 32px;
}
ul#globalnavi li#menu2 a:hover {
background-position:311px 32px;
}
ul#globalnavi li#menu3 a {
background-position:0px 64px;
}
ul#globalnavi li#menu3 a:hover {
background-position:311px 64px;
}
ul#globalnavi li#menu4 a {
background-position:0px 96px;
}
ul#globalnavi li#menu4 a:hover {
background-position:311px 96px;
}