Css弹出菜单

Question

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

item1 | item2 |项目3

当item2悬停时，我想在item2下方显示popover，箭头指向上方。我确信这很容易使用javascript，虽然我还没有完成它。但这里的要求是仅使用CSS。

我找到了这个例子：

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

唯一不同的是，我需要将popover显示在菜单下方而不是上方，箭头指向上方而不是向下。如下图所示：

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

Answer 1

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

所以，这是教程的DEMO，我已经改变了一些CSS，检查出来。

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

Answer 2

http://jsfiddle.net/9yeAJ/

上面的小提琴只说明了一种方法。希望它能让你走上正轨。

Answer 3

查看css3过渡（动画）。你会发现很棒的教程充满了悬停过渡和下拉菜单。