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)