Html 要在悬停列表项上显示的背景图像

试图获取仅在列表项悬停时显示的背景图像。目前：

<div id="nav">
        <ul>
            <li><a href="#">WHO ARE WE?</a></li>
            <li><a href="#">WHAT WE DO?</a></li>
            <li>GALLERY</li>
            <li>CALENDAR</li>
            <li>HISTORY</li>
            <li>CONTACT US</li>
        </ul>
</div>

到目前为止运气不好。任何指点都将不胜感激。如果有任何区别，则图像为300x205。

此代码工作正常

演示

问题更可能是CSS中指定的文件路径指向背景图像。根据图像的存储位置和CSS文件的存储位置，您可能需要提升文件夹级别。例如：

---

background:url（'../images/arrow.png'）不重复
你能给我一个图像的绝对路径吗（像这样
http://example.com/image.png
）这对我有用。这是一个具有不同图像的JSFIDLE。请确定：^忽略大量空间。我尝试了彼得·克利费尔的帖子中的图片，但仍然没有成功。目前完整的URL是：如果你想看到完整的源代码。为了用户体验，不要在鼠标悬停时调用图像，请预加载它！
#nav {
    position: fixed;
    margin-left: 100px;
    width: 200px;
    float: left;
    margin-top: 100px;
    color: white;
}

ul {
    list-style-type: none;
}

li {
    margin-bottom: 20px;
    font-size: 2em;
}

li:hover {
    background: url('images/arrow.png') no-repeat;
}