Javascript 使用绝对位置时不显示下拉菜单

我正在尝试使用HTML/CSS/JS创建一个简单的网页，当鼠标悬停在导航菜单上时，它有一些下拉菜单。当我使用div中的绝对位置作为下拉菜单时，它在悬停时不会弹出。当使用相对位置时，它会下拉，但我希望它是绝对的。我认为问题出在我的css中

这是我的HTML代码的主体部分subnav、subnav1、subnav2和subnav3是四个下拉菜单：

$document.readyfunction{ var总计=4； 无功电流=1； $img1.show $btnNext.clickfunction{ 电流++； ifcurrent>total{current=1；} $.imgss.hide； $img+current.show10； }; $btnPrev.clickfunction{ 电流-； 如果当前您只需向subnav、subnav1、subnav2、subnav3添加z索引，如下所示：

$document.readyfunction{ var总计=4； 无功电流=1； $img1.show $btnNext.clickfunction{ 电流++； ifcurrent>total{current=1；} $.imgss.hide； $img+current.show10； }; $btnPrev.clickfunction{ 电流-；

---

如果当前您必须为容器div添加此规则

PS：你的CSS有点凌乱，我建议不要为每个子菜单重写相同的规则，你可以给它们一个类并编写这些规则一次，在这里你可以添加另一个没有z-index属性的规则

下面是一个例子： 对于每个子菜单div，您给它一个类，并为所有子菜单编写一次规则，使您的CSS干净，浏览器满意。

#container {
    position: relative;
}

.sub-menu {
    background: white;
    width: 15%;
    text-align: center;
    position: absolute;
    margin: 0px 0px 0px 4%;
    display: none;
    border-bottom: thin grey solid;
    border-right: thin white solid; 
    border-left: thin white solid;
    z-index: 100;
}