CSS：在這個例子中，如何設置右邊距使元素的父元素變爲可見？

在尋找鍵盤可訪問的菜單時，我偶然發現了this question，它的答案是CSS下拉菜單http://jsfiddle.net/cfWpE/。它似乎使用菜單中的錨點上的樣式而不是:hover上的<ul>項目來顯示沒有任何Javascript的子菜單，但我無法弄清楚。CSS：在這個例子中，如何設置右邊距使元素的父元素變爲可見？

有人比我更擅長解釋CSS如何工作嗎？我想嘗試將其擴展到三級菜單，但如果不瞭解它如何在兩個級別上工作，那將會很困難。

編輯爲清楚：

它實際上並沒有那麼混淆我的鍵盤部分;據我所知，通過tab鍵切換當前焦點鏈接更新:focus，但似乎也適用於那些元素的唯一CSS規則是

ul.menu li.list a.category:hover, 
ul.menu li.list a.category:focus, 
ul.menu li.list a.category:active { 
    margin-right:1px; 
    background: black; 
}

我不明白保證金權如何設置爲1個像素，使父<li>可見。

來源

2012-09-27 Shawn D.

使用'：focus'（以及'：hover'和'：active'）檢查規則，這允許使用鍵盤相互作用。 –

這是一個有趣的技術，實現下拉菜單。

列表項目.list有一個非常高的負面margin-top和寬度250px。這將他們的內容放置在瀏覽器的視口之外。孩子錨點a.category具有完全相同的值，因此它們對用戶可見，就好像它們正常放置一樣。現在，a.category和ul.submenu都應用了float:left。這就是爲什麼子菜單不出現在錨點下方，而是出現在其旁邊。（但它沒有頁邊距，所以它仍然是「不可見的」）這兩個元素（a.category和ul.submenu）的寬度都是125px，並且完全符合寬度爲250px的父母li。現在懸停錨獲得額外的1px保證金。這使得這兩個元素都太大而無法放入父容器，因此浮動的子菜單會突然出現在換行符中，並突然出現在錨下面 - TADA：-D

我希望你可以按照我的解釋 - 如果不是問請問我需要澄清哪一部分;）

將此擴展到第三級是不可能的 - 我只需要使用一個帶有display:block;和的常規css菜單。但是，您可以使用絕對定位，並在懸停時將top值從非常高的負值切換到0，這會產生相同的效果。

_{一般來說，我會小心使用這個。一些搜索引擎會將文字視爲blackhat SEO，並且可能會因爲使用負邊距或文字縮進而隱藏文字，因此可能會對此進行處罰。儘管Google可能有足夠的聰明能力將其識別爲常規下拉菜單}

來源

2012-10-01 16:22:48 Christoph

謝謝。我問了一些其他人，也沒有人能弄清楚。 –

CSS：在這個例子中，如何設置右邊距使元素的父元素變爲可見？

回答

相關問題