div#a2内の編集
ドリル式ホームページの作り方TOP >> Lesson9〜画像ビュアーの作成〜 >> div#a2内の編集
div#a2内には、ロールオーバーボタンを使用した横並びメニューを作成したいので、リスト（ul,ol）タグを使用してメニュー項目を記述しておきます。
<div id="a2">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Lesson1</a></li>
<li><a href="#">Lesson2</a></li>
<li><a href="#">Lesson3</a></li>
<li><a href="#">Lesson4</a></li>
</ul>
</div>
スタイルは、float:leftで横並びにしたあとに、各メニュー項目の境界線画像として、縦1px、横1pxの画像をbackgroundにrepeat-yで繰り返し配列します。
position:relativeは、IEバグ対策（マウス範囲が広がらない）ですね。
素材作成がめんどいので、画像の切り替えは行いません・・・。
#a2 ul {
margin-left:0;
}
#a2 ul li {
display:inline;
background:url(../gif/31.gif) right top repeat-y;
height:30px;
}
#a2 ul li a {
position:relative;
padding:5px 20px 0 20px;
float:left;
display:block;
}
ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）