Поменять фон (картинкой) в блоке при наведении

Вот код:

  <div id="menu"> 

                <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> 

            </div>

Файл стилей:

#menu{ 

    position:relative; 

    width: 1000px; 

    height: 30px; 

    top: -170px; 

    float:right; 

    z-index:3; 

    text-align:right; 

    top: -160px; 

} 

#menu li{ 

    list-style-type: none; 

    display:inline; 

    padding-left: 45px; 

    padding-right: 45px; 

    padding-bottom:5px; 

    margin:0px 5px 0px 5px; 

    background-image:url(image/button_off.png);     <------------------------------ вот здесь

    background-position:center; 

    background-repeat:no-repeat; 

    z-index:3; 

}

нужно что бы при наведении на пункты меню менялось то самое :
background-image:url(image/button_off.png);
на
background-image:url(image/button_on.png);
как это сделать?

Нужно делать это одной картинкой и менять при наведении background-position

#menu li:hover{

background-position:

}

+хак для ие6

либо использовать ссылку A как контейнер
и задать фон самой ссылке (либо элементу внутри нее), соответственно использовать a:hover

В данном случае когда фон повторяется в кажом пункте списке,лучше прописать для ссылок дисплей блок и для них уже ставить бг и использовать ховер. если нужно для ли обязательно,то нужно сделать яваскриптом, на онмоусовер вешается функция в которую передается this и потом от него берется родитель и его стиль меняется

Спасибо большое. Кому инетерсно кидаю код как сделал:
Файл стилей

#menu li {

	list-style-type: none;

	display:inline;

	margin:0px 5px 0px 5px;

	z-index:3;

}

#menu li a{

background-image:url(image/button_off.png);

	background-position:center;

	background-repeat:no-repeat;

	padding-left: 45px;

	padding-right: 45px;

	padding-bottom:5px;

}

#menu li a:hover{  

     background-image:url(image/button_on.png);

	 background-repeat:no-repeat; 

}