html - Css 弹出菜单

Question

我想在悬停某个菜单项时创建弹出菜单，我的菜单是这样的:

元素 1 |元素2 | item3

当 item2 悬停时，我想在 item2 下方显示弹出窗口，箭头向上。我确信使用 javascript 很容易做到这一点，尽管我还没有做过。但这里的要求是只使用 CSS。

我找到了这个例子:

http://demo.webinterfacelab.com/13-profile-popover/

唯一的区别是我需要弹出窗口显示在菜单下方而不是上方，并且箭头指向上方而不是下方。如下图所示:

有没有人有如何做到这一点的例子？或者可以帮助我做到这一点？

Answer 1

伙计，你必须学习如何使用 inspector :) 技巧在 :after 和 :before 伪类中。

所以，这里正在工作 DEMO在该教程中，我更改了一些 CSS，请查看。

注意:这是 CSS3 有效演示。这些伪类在旧浏览器中不起作用，你也不会看到箭头。过渡和其他 CSS3 花哨的东西也是如此。如果你不想要 JS，你应该意识到这一点。