Html 下拉菜单项不可见

我制作了一个导航菜单栏和两个下拉菜单，每个菜单有3项。我的问题是，在这个菜单下面，我有一个滑块，所以当我悬停下拉菜单时，三个项目中的两个隐藏在滑块后面

我怎样才能解决这个问题

我的HTML：

<div id="nav">
    <div id="nav_wrapper">
        <ul>
            <li><a href="#">item #1</a>
            </li>
            <li> <a href="#">item #2</a>
            </li>
            <li> <a href="#">dropdown #1</a>

                <ul>
                    <li><a href="#">dropdown #1 item #1</a>
                    </li>
                    <li><a href="#">dropdown #1 item #2</a>
                    </li>
                    <li><a href="#">dropdown #1 item #3</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">dropdown #2</a>

                <ul>
                    <li><a href="#">dropdown #2 item #1</a>
                    </li>
                    <li><a href="#">dropdown #2 item #2</a>
                    </li>
                    <li><a href="#">dropdown #2 item #3</a>
                    </li>
                </ul>
            </li>
            <li> <a href="#">item #3</a>
            </li>
        </ul>
    </div>
</div>

---

我认为问题出在你的z指数属性上。 您需要设置#导航和#滑块元素位置和z索引属性

#nav {
 position: relative;
 z-index: 2;
}
#slider{
 position: relative;
 z-index: 1;
}

这意味着，当您在#滑块上设置大于z-index的z-index属性时，#nav菜单将是前滑块。请注意，若不设置元素位置属性（如“相对”或“绝对”），z索引将不起作用

您可以查看此链接，例如-

#nav {
 position: relative;
 z-index: 2;
}
#slider{
 position: relative;
 z-index: 1;
}