CSS - 子菜单消失悬停

Question

如果这是一个简单的错误，我很抱歉。

我试图用悬停效果来更新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%; 

} 

在此先感谢

Answer 1

我建议，这个问题就出在这里：

.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。