CSS или Jquery, как расположить изображение в середине элемента li?

Question

Я пытаюсь расположить фоновое изображение таким образом, чтобы оно выглядело следующим образом:

Пример того, чего я хочу достичь:

У меняэто greenbox (.png) как изображение.То, что я хочу иметь точно в середине меню.

Мой HTMl:

<div id="menu">
<ul>
<li>Some text</li>
<li>Some text 2</li>
<li>Some text 3</li>
</ul>
</div>

МОЙ CSS:

/* MENU */ 
#menu {color:#FFFFFF;float: left;font-family: Arial,"Black";font-size: 18px;margin-top: 31px;width: 700px;}
#menu ul {list-style-type:none;}
#menu li {float: left;margin-left: 15px;}

Я также хочу иметь толькоgreenbox для активных пунктов меню и скрытых пунктов меню.Есть ли умный способ сделать это с помощью Jquery или CSS?

Answer 1

Если я вас правильно понимаю, это будет сделано:

li: hover {background-image: url (greenbox.png);background-position: центр центра;фон-повторить: не повторять;}