CSS:如何设置右边距导致元素的父元素在此示例中变为可见？

Question

在寻找键盘可访问的菜单时,我偶然发现了这个问题,其答案是CSS下拉菜单http://jsfiddle.net/cfWpE/.它似乎在菜单中的锚点上使用样式而不是:hover在<ul>没有任何Javascript的情况下显示子菜单的项目,但我无法弄清楚如何.

在CSS上比我更好的人可以解释一下这是如何工作的吗？我想尝试将其扩展到3级菜单,但是如果不了解它如何在两个级别上工作,那将会非常困难.

为清晰起见编辑:

实际上并不是键盘部分让我感到困惑; 我理解通过: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;
}

我不明白如何将margin-right设置为1像素使父级<li>可见.

Answer 1

这是一个有趣的技术来实现下拉菜单.

列表项.list具有非常高的负值margin-top和宽度250px.这会将其内容放在浏览器的视口之外.子锚a.category具有正余量 - 顶部具有完全相同的值,因此它们对于用户可见,就像它们被正常定位一样.现在两者,a.category并且ul.submenu已经float:left应用了.这就是为什么子菜单不会出现在锚点下方,而是在它旁边.(但它没有margin-top,所以它仍然是"不可见的")两个元素(a.category和ul.submenu)都有125px宽度并且完全适合宽度为的父li级250px.现在悬停时,锚点会获得额外的1px余量.这使得两个元素都太宽而无法左右放入父容器中,因此浮动的子菜单会断开到换行符并突然出现在锚点下方 - TADA:-D

我希望你能按照我的解释 - 如果不是请问我需要澄清哪一部分;)

该扩展到第三个层次是不可能的-我只想用一个普通的CSS菜单去display:block;和hide.但是,您可以使用绝对定位并将top值从非常高的负值切换到0悬停时,这将产生相同的效果.

_{一般来说,我会谨慎使用它.一些搜索引擎认为通过负边缘或文本缩进隐藏的文本作为blackhat SEO并且可能会为此惩罚一个.尽管谷歌可能足够聪明地认识到这是一个常规的下拉菜单}