htmlは、ul、li 。マウスオーバー表示は一枚の画像をスライドして画像を表示しています。
デモページはナビゲーション上部にタイトルを入れていますが、不要ならとってください。マウスオーバー時の画像と通常時の画像を縦にならべて一枚画像を作っておきます。
HTMl
<div class="mod_Sidemenu002"> <h3><img src="Sidemenu_002title.jpg" width="200" height="40" alt="タイトル" /></h3> <ul> <li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li> <li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li> <li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li> <li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li> <li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li> <li><a href="#"><img src="Sidemenu_002.gif" width="200" height="80" alt="サイドメニュー" /></a></li> </ul> <!-- mod_Sidemenu002_end --></div>
CSS
.mod_Sidemenu002{
width:200px;
padding:10px;
background-color:#DDD;
}
.mod_Sidemenu002 h3{
}
.mod_Sidemenu002 ul{
border-top:solid 1px #CCC;
}
.mod_Sidemenu002 ul li{
height:40px;
overflow:hidden;
vertical-align:bottom; /* IE6で画像下の隙間削除 */
border-bottom:solid 1px #CCC;
}
.mod_Sidemenu002 ul li a{
display:block;
}
.mod_Sidemenu002 ul li a:link {text-decoration:none;}
.mod_Sidemenu002 ul li a:visited {text-decoration:none;}
.mod_Sidemenu002 ul li a:hover {margin-top:-40px;}
.mod_Sidemenu002 ul li a:active {margin-top:-40px;}