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。