スクロールメニュー

<link rel="index" href="./index.html" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="style_ie6.css" />
<![endif]-->
<script type="text/javascript" src="wrapscroll.js"></script>
<script type="text/javascript"><!--
//wrapScroll
var mov = new wrapScroll('menubox','wrapper','counter');
//上からのマージンを指定(px)
mov.marginTop = 10;
//--></script>

<div id="menubox">
<ul>
  <li><a href="http://sawa-s.com/">HOME</a></li>
  <li><a href="#">MENU 1</a></li>
  <li><a href="#">MENU 2</a></li>
  <li><a href="#">MENU 3</a></li>
  <li><a href="#">MENU 4</a></li>
  <li><a href="#">MENU 5</a></li>
  <li><a href="#">MENU 6</a></li>
</ul>
<!-- / #menubox --></div>

/*▼ wrapScroll ナビゲーションメニュー用▼ */
/*▼  メニューブロック  ▼*/
#menubox {
  position: relative;
  width: 190px;      /* メニューの横幅＋10 */
  height: 280px;      /* （メニューの高さ＋メニューとメニューの間隔）×メニュー項目数 */
  margin: 0 5px;
  padding:20px 0 10px 0;  /* 15px:上部余白 5px:下部余白（15-メニュー間隔） */
  font-size: 12px;
  background: url(image/bg_menubox.png) no-repeat;
    /* 190 x 310(280 + 上部余白 + 下部余白)pxの角丸透過PNGファイルを指定 */
}
#menubox ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 5px;
}
#menubox ul li{
  margin-bottom:10px;    /* メニューとメニューの間隔 */
}
#menubox ul li a{
  display: block;
  width: 180px;      /* メニューの横幅 */
  height: 30px;      /* メニューの高さ */
  margin: 0 5px;
  color: #FFF;
  background: url(image/bg_menu.png) no-repeat;
  padding: 0;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  line-height:30px;    /* メニューの高さ（縦位置のセンタリング） */
  text-indent:1.5em;
}
#menubox ul li a:visited{
  color: #FFF;
}
#menubox ul li a:hover{
  color: #FFF;
  background: url(image/bg_menu.png) no-repeat 0 -30px;
}

/*▲ ナビゲーションメニュー 終了▲ */

#menubox {
  background: url(image/bg_menubox.gif) no-repeat;
      /* IE6.0以下用 190 x 310(280 + 上部余白 + 下部余白)pxの角丸透過GIFファイルを指定 */
}