css - 鼠标悬停时扩展的菜单，纯粹通过 CSS 完成？

Question

有人告诉我，他们只能通过 CSS 创建菜单，你怎么能？

Answer 1

它是通过选择器完成的。您使用伪类来指定特定元素仅在其父元素被悬停时显示。

#nav li:hover > ul {
display: block;
}

这只会让 ul 在其父元素 #nav 被悬停时显示。ul 现在是下拉菜单，您可以在其中放置更多列表项。这将适用于您希望下拉菜单具有的任何级别。

这项技术在本教程中得到了很好的展示：CSS3 Dropdown Menu

Answer 2

我正在输入一个答案，但是这个简单、简短的页面比我说的要好。基本上你display: hidden在扩展部分上做，然后display: block在它的悬停状态下添加一个到触发器元素。