CSS下拉導航，展會上的點擊，而不是哈弗

https://jsfiddle.net/ax92n1hq/3/CSS下拉導航，展會上的點擊，而不是哈弗

此導航功能也正是我希望它的正常大小的屏幕上。然而，在裏面...

@media screen and (max-width: 640px) 
{ 
    .... 
}

我似乎無法弄清楚如何讓下拉顯示點擊而不是懸停。我99％肯定這是可能的CSS。我看到有人問過這個問題，並得到了答案。但是現在我需要實施，但是我再也找不到那篇文章。

來源

2015-06-22 Casey Crookston

您可能需要嘗試鏈接上的[：active]（https://developer.mozilla.org/en-US/docs/Web/CSS/%3Aactive）僞類。我知道你正在處理'ul'和'li'元素，但是對於你指定的規則，你可能需要改用鏈接。 –

我嘗試的第一件事是改變.nav ul li：懸停> ul到.nav ul li：active> ul和.nav ul li：focus> ul。他們仍然顯示懸停下拉菜單:-( –

谷歌「複選框黑客」 –

就我所知，不可能使用純CSS。如果你真的不能使用JS，你可能會嘗試使用一些隱藏的複選框，並將toogle按鈕作爲標籤。然後根據複選框的狀態設置菜單的樣式。

來源

2015-06-22 20:57:48

它可能與純CSS。看到這個例子http://koen.kivits.com/articles/pure-css-menu/我'我只是想讓它爲我工作！ –

你試過在手機上打開jsfiddle嗎？它對我來說是原樣。 –

@Grekomp這可能是真的，但'：hover'可能會在觸摸設備上引起一些意外的行爲。 – LuudJacobs

首先：請在這裏發佈您的代碼，所以我們並非都必須去JSFiddle才能看到它。

您提出的解決方案在要顯示的<ul>的父<li>上使用僞類:focus。這個:focus是通過點擊來實現的。然而，<a>是<li>的「頂部」，並且<a>的「頂部」是<span>，其變得:focus。不幸的是，沒有父選擇器是CSS（還）。所以用這種方法你不會只用CSS，但需要一些JS，改變你的HTML或使用隱藏的複選框技巧。

您可以很容易地看到瀏覽器的檢查器中發生了什麼。

來源

2015-06-22 21:09:35 LuudJacobs

好的，謝謝。好建議。關於JSFiddle ....在其他問題上，我發佈了大量的代碼，有人說，「不要那樣做！只要使用JSFIddle！」似乎你不能總是讓每個人都滿意。 –

CSS下拉導航，展會上的點擊，而不是哈弗

回答

相關問題