htmlは、ul、li 。マウスオーバー表示はCSSで背景色と背景画像を変更しています。
デモページはナビゲーション上部にタイトルを入れていますが、不要ならとってください。
HTMl
<div class="mod_Sidemenu001"> <h3>タイトル</h3> <ul> <li><a href="#">サイドメニュー</a></li> <li><a href="#">サイドメニュー</a></li> <li><a href="#">サイドメニュー</a></li> <li><a href="#">サイドメニュー</a></li> <li><a href="#">サイドメニュー</a></li> </ul> <!-- mod_Sidemenu001_end --></div>
CSS
.mod_Sidemenu001{
width:200px;
padding:10px;
background-color:#DEDEDE;
}
.mod_Sidemenu001 h3{
padding:5px;
color:#FFF;
font-weight:bold;
font-size:1.4em;
background-color:#666;
}
.mod_Sidemenu001 ul{
border:solid 1px #CCC;
border-bottom:none;
}
.mod_Sidemenu001 ul li{
line-height:3.0;
border-bottom:solid 1px #CCC;
background-color:#FFF;
}
.mod_Sidemenu001 ul li.first{
border-top:solid 1px #CCC;
}
.mod_Sidemenu001 ul li a{
width:178px; /* IE6用 */
padding:0 0 0 20px;
display:block;
background:transparent url('Sidemenu_001.gif') no-repeat 5px 45% scroll;
}
.mod_Sidemenu001 ul li a:link {color:#666; text-decoration:none;}
.mod_Sidemenu001 ul li a:visited {color:#666; text-decoration:none;}
.mod_Sidemenu001 ul li a:hover {color:#666; background-color:#EEE;background-image: url('Sidemenu_001_over.gif');}
.mod_Sidemenu001 ul li a:active {color:#666; background-color:#EEE;background-image: url('Sidemenu_001_over.gif');}