/* ここからmenu部分id取っているだけで直接レイアウトには関係なさそうです？あれ違うかな？
-------------------------------- */
# menu
{
margin-bottom: 1em;
}

/* 背景にmenu_bg.gifを横繰り返し、高さは画像と同じサイズ
-------------------------------- */
#menu ul 
{
	background-image: url(menu_bg.gif);
	background-repeat: repeat-x;
	background-position: 0 0;
	position:relative;
}

/* listタグをfloatで左に回り込ませていますサイズも指定
-------------------------------- */
#menu li 
{
	width: 105px;
	height: 64px;
	list-style-type:none;
	float: left;
}

/* aタグをblock要素にしてIE以外への対策、インデントで本来のテキストを左画面外の左999pxに飛ばしています
一桁すくなく間違えたので-9999emに変更すますた */
#menu li a 
{
	display: block;
	width: 105px;
	height: 64px;
	background-position: 0 0;
	background-repeat: no-repeat;
	text-decoration: none;
	text-indent: -9999em;
}    
	
/* 各listタグにidをつけ個々に背景画像を指定、画像はマウスオフ、マウスオンを
上下につないだものを使いましたですから高さは54pxです
-------------------------------- */
#menu li#m1 a 
{
	background-image: url(img/menu/menu1.gif);
}

#menu #m2 a 
{
background-image: url(img/menu/menu2.gif);
}

#menu #m3 a 
{
background-image: url(img/menu/menu3.gif);
}

#menu #m4 a 
{
background-image: url(img/menu/menu4.gif);
}

#menu #m5 a 
{
background-image: url(img/menu/menu5.gif);
}

#menu #m6 a 
{
background-image: url(img/menu/menu6.gif);
}

#menu #m7 a 
{
background-image: url(img/menu/menu7.gif);
}

#menu #m8 a 
{
background-image: url(img/menu/menu8.gif);
}
/* マウスオンすると重なった64px下の画像が出てきます
-------------------------------- */
#menu li a:hover 
{
	background-position: 0 -64px;
}

#menu ul,li
{
margin: 0;
padding: 0;
}