Меню CSS исчезает при зависании

Question

На веб-странице у меня есть подменю. Однако при наведении «biler til salg» появляется подменю, если вы попытаетесь щелкнуть подменю (уйти от родителя), подменю исчезнет, ​​так как вы больше не наведете его.

Это мой CSS:

.primary-navigation li { 
    border: 0; 
    display: block; 
    height: 18px; /* SOLUTION WAS TO REMOVE THIS */ 
    line-height: 29px; 
    position: relative; 
} 
.primary-navigation a { 
    display: inline-block; 
    padding: 0 12px; 
    white-space: nowrap; 
} 
.primary-navigation ul ul { 
    background-color: #dc002e; 
    float: left; 
    margin: 0; 
    position: absolute; 
    top: 24px; 
    left: -999em; 
    z-index: 99999; 
} 

.primary-navigation li li { 
    border: 0; 
    display: block; 
    height: auto; 
    line-height: 1.0909090909; 
} 

.primary-navigation ul ul ul { 
    left: -999em; 
    top: 0; 
} 

.primary-navigation ul ul a { 
    padding: 18px 12px; 
    white-space: normal; 
    width: 176px; 
} 

.primary-navigation li:hover > a, 
.primary-navigation li.focus > a { 
    color: #8f404d; 
} 

.primary-navigation ul ul a:hover, 
.primary-navigation ul ul li.focus > a { 
    background-color: #dc002e; 
} 

.primary-navigation ul li:hover > ul, 
.primary-navigation ul li:focus > ul { 
    left: auto!important; 
} 

Может кто-нибудь увидеть, что я делаю неправильно?

Answer 1

Подменю скрывается, потому что между пунктом меню и подменю есть пробел. Разрыв заключается в том, что вы фиксируете высоту элемента li до height: 18px;. Просто удалите эту высоту, чтобы она работала правильно.

Я обнаружил, что высота в этой части класса:

media="all" 
@media screen and (min-width: 783px)