尝试将鼠标悬停在HTML子菜单上时，该子菜单将消失

我创建了一个有子菜单的HTML菜单，但是当我将鼠标悬停在主菜单上，它显示子菜单时，我无法访问它。在我向下移动鼠标导航到它之前，它就消失了。我不知道我做错了什么，也许有人可以帮助我。谢谢

#header ul { position: absolute; top: 88px; left: 0; }
#header ul li { display: inline;}
#header ul li a { font-size: 11px; text-decoration: none; text-transform: uppercase; margin-right: 20px; color: #fff; line-height: 2em;}
#header ul li ul{ position: static;display: none; z-index: 999;top:150%;}
#header ul li:hover a { font-weight:bold; color: #000000}
#header ul li:hover ul { display: block; position:absolute;}

编辑以显示HTML

     <ul>
                <li><a href="/Default.aspx">Home</a>              
                </li>
                <li>
                    <a href="/Cover/HRMS.aspx">HRMS</a>
                    <ul>
                    <li>
                    <a href="/Cover/HRMS.aspx">Position</a>
                    </li>
                    <li>
                    <a href="/Cover/HRMS.aspx">COA</a>
                    </li>
                    <li>
                    <a href="/Cover/HRMS.aspx">Employee</a>
                    </li>
                    <li>
                    <a href="/Cover/HRMS.aspx">Estate</a>
                    </li>
                    </ul>
                </li>
                <li>
                    <a href="/Cover/EmployeeMaintenance.aspx">Employee Maintenance</a>
                </li>
                <li>
                <a href="/Cover/Payroll.aspx">Payroll</a>
                </li>
                <li>
                <a href="/Cover/DataTransfer.aspx">Data Transfer</a>
                </li>
                <li>
                <a href="/Cover/Reports.aspx">Reports</a>
                </li>
                <li>
                <a href="/Cover/Administration.aspx">Administration</a>
                </li>
                <li>
                <a href="/Cover/Help.aspx">Help</a>
                </li>
              </ul>

---

问题是主电源和子电源之间的断开连接

在您的样式中

ul li ul{position:static；display:none；z-index:999；top:150%；}

top:150%

创建断开连接（因此当您从

ul li

悬停到

ul li

时，您将鼠标悬停在nothing上，而不是点击子菜单的

：hover

逻辑）。您可以尝试使用

填充顶部

：

ul li ul{位置：静态；显示：无；z索引：999；顶部填充：10px；}

编辑：是一个工作导航菜单的例子，你可以看看

---

编辑2：看起来它可以在Firefox和Chrome中使用，但不能在IE中使用。

您需要一个直接的子选择器，位于以下位置：

li:hover>ul{display:block；（…）}

---

这意味着列表中的子

将在其直接父

悬停时显示。

我写了一篇关于葡萄牙语下拉菜单的文章，但我想它将帮助您进行谷歌翻译或类似的操作

---

查看：

我把它添加到了问题中。对不起，我应该更具体一些；你能把它编辑成*相关的*/HTML吗？我试过了，它把子菜单发送到页面下方，但我仍然无法滚动到它上面：/嘿，我正在尝试一些不同的东西..尝试使用以下命令获取同一行中的子菜单：#header ul li:hover ul{display:inline；position:static；}。。但是变化太快了。。有什么方法可以纠正这个问题吗？你能在问题中发布一个更新的CSS块吗？我正在使用这个

#header ul li:hover ul{display:block；position:absolute；}

嘿，我正在尝试一些不同的东西..尝试使用以下命令在同一行中获取子菜单：：#header ul li:hover ul{display:inline；position:static；}。。但是变化太快了。。有什么方法可以纠正这个问题吗？使用直接子选项

，比如

#header ul li:hover>ul{…}