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.