html - Css 弹出菜单

Question

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

项目1 | 项目2 | 第 3 项

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

我找到了这个例子：

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

在此处输入图像描述

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

score 13 · Accepted Answer

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

所以，这里是那个教程的工作演示，我改变了一些 CSS，检查一下。

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

score 8 · Accepted Answer

上面的小提琴说明了这样做的一种方法。希望它能让你走上正确的轨道。

score 1 · Accepted Answer

1

查看 css3 过渡（动画）。您会发现充满悬停过渡和下拉菜单的精彩教程。

于 2012-10-13T22:39:11.860 回答

3 回答 3