CSS或Jquery如何在li元素的中间定位图像？

Question

我正在尝试定位背景图片，以便在悬停时看起来像这样：

我想要实现的例子：

我将此绿色框（.png）作为图像。我想要在menbu的正中间。

我的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;}

我还希望只在活动菜单项和悬停菜单项上设置绿框。有没有一种聪明的方法可以用Jquery或CSS做到这一点？

Answer 1

如果我理解正确，我会这样做：

利：悬停{背景图像：网址（greenbox.png）;背景位置：中心;背景重复：不重复;}