新手CSS：下拉菜單顯示沒有菜單懸停？

我一直在嘗試創建一個下拉菜單，並且在菜單懸停時出現下拉菜單時，它也顯示出沒有菜單懸停的情況。只要我將光標移動到應該出現下拉列表的位置，它就會出現。你知道我做錯了什麼，我該如何糾正？我希望我的意思是...

此外，我知道我的菜單的寬度擴大，因爲我擴大窗口大小。請忽略它，它在我正在處理的主代碼中沒有這樣做。

在此先感謝！

.top-menu>ul { 
 
    background-color: #78a1bb; 
 
    font-size: 150%; 
 
    padding-left: 0px; 
 
    padding-right: 0px; 
 
} 
 

 
.top-menu>ul>li { 
 
    list-style: none; 
 
    display: inline-block; 
 
    padding: 5px 124px; 
 
    position: relative; 
 
} 
 

 
.top-menu>ul>li:hover { 
 
    background-color: #d6e2ea; 
 
} 
 

 
ul.sub-menu { 
 
    position: absolute; 
 
    width: 290px; 
 
    background-color: #d6e2ea; 
 
    list-style: none; 
 
    padding-left: 0px; 
 
    padding-top: 5px; 
 
    opacity: 0; 
 
} 
 

 
ul.sub-menu li { 
 
    font-size: 80%; 
 
    padding-top: 10px; 
 
    padding-left: 25px; 
 
    padding-bottom: 10px; 
 
} 
 

 
.top-menu li:hover .sub-menu { 
 
    opacity: 1; 
 
    left: 0px; 
 
}

<nav class="top-menu"> 
 
    <ul> 
 
    <li> A 
 
     <ul class="sub-menu"> 
 
     <li>Sub a </li> 
 
     <li>Sub b </li> 
 
     <li>Sub c </li> 
 
     </ul> 
 
    </li> 
 
    <li> B </li> 
 
    <li> C </li> 
 
    </ul> 
 
</nav>

來源

2017-04-09 InTheBackground

這將是非常有用的，如果你發佈一個plunker與你的代碼。 –

改用opacity掩飾你sub-menu的。您可以使用display: none隱藏，然後display: block再次顯示。

如果你只是改變不透明度，元素仍然是「在你的鼠標下」，CSS試圖多次顯示和隱藏（你的子菜單是「輕彈」）。

使用display: none子菜單消失，並且鼠標不會將其「永久」懸停。

我用正確的代碼創建了一個plunker。 https://embed.plnkr.co/TZ7U0m19WijN0kIe6Xgl/

來源

2017-04-09 07:24:38

感謝您的解釋！ – InTheBackground

請評價答案。不用謝。 –

新手CSS：下拉菜單顯示沒有菜單懸停？

回答

相關問題