Click＆With滾動條上的下拉菜單（僅CSS）

我試圖做一個下拉菜單 - 僅在CSS中 - 下拉式鼠標單擊（而不是鼠標懸停）並具有滾動條，因爲那裏將有22個選項。到目前爲止，我在這裏：http://fiddle.jshell.net/yobqsjb2/1/Click＆With滾動條上的下拉菜單（僅CSS）

（我只限於CSS，因爲JavaScript，PHP等被大學阻止。我也不能使用選擇或選項代碼（IE：[select name = 'menu'] [option value ='1'] first item [/ option]）在頁面的HTML中，因爲編輯器一直在剝離它們。我從網上收集了關於WordPress上的TinyMCE可視編輯器正在做這件事，但不幸的是，我無法改變它，所以我需要解決這個限制。）

我已經從其他來源獲取代碼進行調整，但我完全承認我更關注PC修復方面的問題幾年前的事情（改變職業，現在將公司網站遷移到新領域）而不是前程序員。很多我所看到的應該是爲其他用戶的代碼解決問題，我不太明白他們做得足夠好以便在此處應用它...

我知道「on點擊「問題與a：懸停和li：懸停（vs a：active/li：active），但是當我切換它們時，菜單會在鼠標碰到它時消失。我讀到，我需要一個'顯示：塊';'在代碼中的某處，但是基於所示的示例，我已將它放在每個代碼段中，並且都放在它們中......它似乎並不想解決問題。

就滾動條而言，我所發現的一切都是使用Javascript，或者在一些地方說它不能用於IE（理想情況下，它可以在任何地方工作，或者有一個IE替代品，看起來很時髦）。

這兩種情況中的一種或兩種可能嗎？我已經想通了如何改變下拉菜單的大小，顏色，邊框等，只是沒有這兩個項目...

在此先感謝

來源

2015-06-23 tearsong

如何使用'details'標記？ http://www.w3schools.com/tags/tag_details.asp – ctwheels

這看起來很有前途！肯定在今天晚些時候看！謝謝！！！ – tearsong

不客氣，讓我知道這是否適合你。你應該注意到對標籤的支持並不好。在這裏尋找更多信息：https：//developer.mozilla.org/en-US/docs/Web/HTML/Element/details。目前Firefox和IE瀏覽器（並不奇怪）不支持標籤（用於桌面），只有Android支持移動設備 – ctwheels

爲:focus工作，你需要一個tabindex元素（li）。

小提琴：http://fiddle.jshell.net/yobqsjb2/3/

來源

2015-06-23 18:46:23 gopalraju

謝謝，我不知道tabindex。我假設我需要一個'display：block'來讓它在鼠標點擊事件結束後停止返回。（這是我讀過的東西，我只是不知道該把它放在哪裏，因爲這個人沒有使用列表函數來做菜單......） – tearsong

Click＆With滾動條上的下拉菜單（僅CSS）

回答

相關問題