Html 子菜单ù；在父辈男人之后消失ù；项目失去焦点

我有一个html下拉菜单

问题是 1.将鼠标悬停在父菜单项上时，子菜单将显示“确定”。然而，当盘旋在孩子身上时，这会消失，使它变得毫无用处。 2.儿童子菜单项背景色不正确，即使我已将其设置为rgba（17、91、164、.6）并添加了！重要指示

HTML

我做错了什么？谁能帮帮我吗？为方便起见，我上传了示例页面：

---

我做错了什么？

试着改变你在列表中的位置。根据您提供的示例，我可以通过Chrome的DevTools和菜单进行以下修改。我相信您当前的代码正在将子菜单定位到屏幕外。父LI需要相对于页面的其余部分，子菜单需要绝对位于父LI内

#mainMenu ul li {
    position: relative;
}

#mainMenu ul li ul {
    position: absolute;
}

---

与其上传一个示例页面（如果您选择删除该页面，用户可能无法使用该页面），您是否可以创建一个替代页面？谢谢。你让我开心。

#mainMenu
{
font-size: 0.85em;
padding:10px 0 0px 0;

border:white 2px;
background: rgba(17, 91, 164, .6);
height:50px;

/*overflow:hidden;*/
}

#mainMenu ul
{
    margin: 0;
    padding: 0;
    text-transform: uppercase;
    list-style-type: none;
}



#mainMenu ul li
{

    height:20px;
    float:left;

    text-align:center;
    font-weight:bold;
    font-size:1.7em;
    margin-left:.5em;
    margin-right:.5em;
    max-width:180px;

    padding:15px !important;


}

#mainMenu ul li:hover, #mainMenu ul li.active
{
background: rgba(17, 91, 164, 1);
border-top: rgba(17, 91, 164, 1) 15px;
}

#mainMenu ul li a, #mainMenu ul li span a
{
    color:brown;
    text-decoration:none;
    color:#FFF;

    font-weight:bold;


}

.accountMenuItem
{
    /*margin-left:88px !important;*/

}

.mainSubMenu
{
display:none;

z-index:100!important;
background: rgba(17, 91, 164, 1) !important;
color:black !important;
font-size:1em!important;
}


/*.mainMenu:hover   .mainSubMenu {display:block }*/

.mainMenu ul li:hover > ul{display:block;}
.mainMenu ul li ul li:hover  {display:block;}

#mainMenu ul li ul
{
position: relative;
left:-2px; top:98%;
background: rgba(17, 91, 164, 1) !important;
color:white;
}

#mainMenu ul ul ul
{position: relative; left:98%; top:-2px;}

#mainMenu ul ul
{
    width:119.7px;
}

#mainMenu ul li {
    position: relative;
}

#mainMenu ul li ul {
    position: absolute;
}