CSS or Jquery how to position image in the middle of an li element?

I am trying to position an background image so it looks like this when hovered:

Example of what I want to achive:

I have this greenbox(.png) as image. That i want to have in the exact middle of the menbu.

My HTMl:

<div id="menu"开发者_高级运维>
<ul>
<li>Some text</li>
<li>Some text 2</li>
<li>Some text 3</li>
</ul>
</div>

MY 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;}

I also want to only have the greenbox on active menu items and hovered menu items. Is there a smart way of doing that with Jquery or CSS?

If I understand you correctly, this will do it:

li:hover{background-image:url(greenbox.png); background-position:center center; background-repeat:no-repeat;}