픽시 롤오버 이미지의 background-position 설정 방법

픽시 롤오버로 메뉴를 구현하려는데 잘 안 되네요 ㅠㅠ
background-position 값을 어떻게 잡아야 하는지 알려주세요.
파이어폭스 눈금자로 확인하는 방법은 봤는데 값을 계산하는 법을 모르겠어요.
관련 코드도 함께 올립니다.

div#global {
background: url(../images/common/gnb_off.gif) no-repeat right 0;
width:685px;
height:97px;
margin-left:228px;
}
ul.globalNavi {
}
ul.globalNavi li{
font:0/0;
text-indent:-1000em;
}
ul.globalNavi a {
background: url(../images/common/gnb_off.gif) no-repeat ;
text-indent:-1000em;
overflow:hidden;
font:0/0;
}
ul.globalNavi a:hover{
background: url(../images/common/gnb_on.gif) no-repeat ;
}
ul.globalNavi li.gnb01 a{background-position:0 -46px; width:69px; height:20px; }

div id=global
ul class=globalNavi
li class=gnb01a href=OPEN API/a/li
li class=gnb02a href=S/W 중간모듈/a/li
li class=gnb03a href=글로벌앱매칭/a/li
li class=gnb04a href=기술동향/정책/a/li
li class=gnb05a href=커뮤니티/a/li
li class=gnb06a href=포털소개/a/li
/ul
/div!-- end global--