5

在寻找可通过键盘访问的菜单时，我偶然发现了这个问题，它的答案是 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>可见。

4

1 回答 1

16

这是实现下拉菜单的有趣技术。

列表项.list的负数很高margin-top，宽度为250px. 这会将它们的内容置于浏览器的视口之外。子锚点a.category具有完全相同的值的正边距顶部，因此它们对用户可见，就好像它们被正常定位一样。现在，thea.category和 theul.submenu都已float:left应用。这就是为什么子菜单不会出现在锚点下方，而是出现在它旁边的原因。（但它没有顶部边距，所以它仍然是“不可见的”）两个元素 (a.category和ul.submenu) 都有125px宽度并且完全适合li宽度为250px. 现在悬停在锚点上1px利润。这使得两个元素都太宽而无法并排放入父容器中，因此浮动的子菜单会换行并突然出现在锚点下方 - TADA:-D

我希望你能听从我的解释——如果不问我需要澄清哪一部分；）

将其扩展到第三级是不可能的-我只会使用带有display:block;and的常规 css 菜单hide。但是，您可以使用绝对定位并将top值从非常高的负值切换到0悬停时，这将具有相同的效果。

一般来说，我会小心使用它。一些搜索引擎将通过负边距或文本缩进隐藏的文本视为黑帽 SEO，并可能因此对其进行处罚。尽管谷歌可能足够聪明，可以将其识别为常规下拉菜单

于 2012-10-01T16:22:48.220 回答