如何使overflow-y獨立於overflow-x運行

我正在爲導航欄使用一些CSS，並且我需要使用max-height和overflow-y: scroll作爲下拉列表，以確保它適合頁面。但是，每當我設置overflow-y屬性滾動，它似乎自動強制執行overflow-x也必須設置爲scroll，作爲結果，子菜單變爲隱藏。如何使overflow-y獨立於overflow-x運行

請參見以下的jsfiddle的工作示例

https://jsfiddle.net/5eyveyfz/

編輯：我要澄清使用我的小提琴。當您將鼠標懸停在標題爲「SubMenu 1」的菜單項上時，會出現問題，該菜單項顯示相關子菜單。預期的行爲是，這個子菜單是可見的沒有滾動條，但相反，其行爲好像overflow-x被設置爲scroll

來源

2016-11-21 Austin Philp

我沒有看到你的小提琴水平滾動條。也許我不理解你的問題正確 –

@MichaelMcCoy，看到我的編輯，在試圖通過將鼠標懸停在菜單項「SubMenu1」打開子菜單時出現的問題 –

@epascarello是的，你爲什麼會覺得是不是？ jQuery的部分功能完全按預期，它是給我找麻煩 –

改變這些值將直接顯示在子菜單標題下面的下拉菜單：

#menu > ul { 
overflow-y:scroll; 
overflow-x:hidden; 
max-height:300px; 
} 

.submenu { 
position:relative; 
display: none; 
left:0; 
top:0; 
}

如果你想保持左側位置，你需要使容器寬或將其更改爲display：inline-block的;沒有設置寬度以適應內容的大小。

來源

2016-11-21 20:39:49

雖然它不在你的小提琴 - 這是可能的數據，你填充在你的實際構建是迫使表溢出其寬度？

如果是這樣，改變容器溢出-X：隱藏;以防止水平滾動條。

來源

2016-11-21 19:22:59 Korgrue

對不起，也許我沒有說清楚。問題在於，通過懸停在「SubMenu1」項上觸發的子菜單被隱藏，因爲當它在css中顯式聲明爲可見時，行爲被設置爲「滾動」 –

如何使overflow-y獨立於overflow-x運行

回答

相關問題