Html CSS-悬停时子菜单消失

如果这是一个简单的错误，我首先道歉

我正在尝试更新带有悬停效果的css菜单的代码，当我将鼠标悬停在父li上时，子菜单ul出现。当我尝试悬停到子菜单时，它消失了；据我所知，在父菜单和子菜单之间有一个口吃

菜单的代码如下所示：

.site-header{
    border-bottom: 1px solid #DADADA;
}

.site-branding{
    width: 30%;
    padding-top:5px;
}

.navigation-container{
    width: 70%;
}

.main-navigation ul {
    clear: both;
    display: block;
    float: left;
}
.main-navigation{
    padding-top: 5px;
    display: block;
}

.main-navigation li{
    display:block;
            border-right: 1px dotted #DADADA;
}

.main-navigation a{
    padding-right:3px;
    padding-left:3px;
    font-size:75%;
    font-weight: lighter;
    display: block;
}

.main-navigation li:last-of-type{
    border-right:none
    }

.main-navigation a ul{
    display:none;
}

.main-navigation ul li:hover ul{
    right: 50%;
    margin-right: -150%;
    width:180px;
    position: absolute;
}

.main-navigation ul ul a{
    font-size:10px;
    font-weight: lighter;
    width:180px;
}

.main-navigation ul ul li{
    font-size:50%;

}

---

提前感谢

我建议问题在于：

.main-navigation ul li:hover ul{
    right: 50%;
    margin-right: -150%;
    width:180px;
    position: absolute;
}

通常情况下，它看起来像这样：

.main-navigation ul li:hover ul{
    left: 100%; /* start at the right edge of the parent li */
    top:0% /*always align to the top of the parent li */
    width:180px;
    position: absolute;
}

---

另外，家长

li

应该有

position:relative

你也可以发布HTML吗..如果可以的话，请复制一下这个问题。。