Html 如何在图像前显示菜单项？

我有一个水平导航菜单，当你将鼠标悬停在菜单上时，项目显示在网页图像的后面，而不是前面。我该如何解决这个问题

代码：

HTML:

<div id="nav">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Tutorials</a>
        <ul>
            <li><a href="#">Photoshop</a></li>
            <li><a href="#">Illustrator</a></li>
            <li><a href="#">Web Design</a>
                <ul>
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Articles</a>
        <ul>
            <li><a href="#">Web Design</a></li>
            <li><a href="#">User Experience</a></li>
        </ul>
    </li>
    <li><a href="#">Inspiration</a></li>
</ul>
</div>

---

您应该尝试使用z索引css属性：

.horizontalmenu{
     z-index:10; /*or more than your image */
     position:relative;
 }

如果你想要一个更精确的答案，请发布一些代码

---

编辑：正如Don在评论中所说，请确保将菜单置于位置：相对（编辑的css）

只需在菜单的css中设置

z-index=1

（或高于图像的任何数字）。希望这有帮助：）

发布您的代码。然后尝试

z-index

。应该注意的是

位置：相对

需要伴随和

z-index

设置

.horizontalmenu{
     z-index:10; /*or more than your image */
     position:relative;
 }