CSS ロールオーバー

/* ------------------------------------------ メニュー */
#gloval_menu{
	width:720px;
	height:40px;
	zoom: 1;
	position: relative;
	background: url('../img/basic/head_gloval_menu.gif') no-repeat left top;
}
 
#gloval_menu li a:hover, #gloval_menu li a:active {
	background: url('../img/basic/head_gloval_menu_ov.gif') no-repeat left top;
/*	background-color:#FFF;*/
}
 
#gloval_menu li{
	position: absolute;
}
 
#gloval_menu a{
	display: block;
	height: 25px;
}
 
li#m_1,
li#m_2,
li#m_3,
li#m_4,
li#m_5,
li#m_6,
li#m_7{
	top:15px;
	height:25px;
}
 
 
li#m_1 { left:   0px; width: 115px; }
li#m_2 { left: 115px; width: 100px; }
li#m_3 { left: 215px; width: 100px; }
li#m_4 { left: 315px; width: 100px; }
li#m_5 { left: 415px; width: 100px; }
li#m_6 { left: 515px; width: 100px; }
li#m_7 { left: 615px; width: 105px; }
 
li#m_1 a:hover, li#m_1 a:active { background-position:     -0px -15px; }
li#m_2 a:hover, li#m_2 a:active { background-position:   -115px -15px; }
li#m_3 a:hover, li#m_3 a:active { background-position:   -215px -15px; }
li#m_4 a:hover, li#m_4 a:active { background-position:   -315px -15px; }
li#m_5 a:hover, li#m_5 a:active { background-position:   -415px -15px; }
li#m_6 a:hover, li#m_6 a:active { background-position:   -515px -15px; }
li#m_7 a:hover, li#m_7 a:active { background-position:   -615px -15px; }