Здравствуйте, люди добрые!

Помгите пожалуйста :)

Предположим есть меню. Я его делаю очень стандартно:

Код HTML: 
<ul class="menu"> <li><a href="#">Пункт 1</a></li> <li><a href="#">Пункт 2</a></li> <li><a href="#">Пункт 3</a></li> </ul>
Код HTML: 
ul {list-style-type: none;}
ul.menu li {float: left;}
Это если базово. Ну там маргины ещё, цвет шрифта и тому подобное я тут опускаю, ибо не суть...

На это меню нужно по наведению мышки навешать картинку и изменить цвет шрифта. Вроде всё понятно, но возникают вопросы:

1. Событие hover вешать на саму ссылку или на LI?
2. Как добиться того, чтобы картинка была не по высоте текста, а по высоте блока меню?
3. Известно, что в меню слова могут быть разной длины. Как сделать так, чтобы картинка заполняла по ширине всё пространство? Т.е. не была фиксированной по ширине, а подстраивалась бы под слова меню?
4. И, наконец, как сделать так, чтобы эта разность ширин слов не повлияла на общий вид меню? Т.е. чтобы во всех ситуациях слова меню не прыгали и не съезжали?

Всем спасибо огромное за помощь! :)