Html CSS 弹出菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12877625/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Css popover menu
提问by London
I want to create popover menu when certain menu item is hover-ed, my menu is like this :
我想在某个菜单项被悬停时创建弹出菜单，我的菜单是这样的：
item1 | item2 | item3
项目 1 | 项目2 | 第 3 项
When item2 is hovered I want to display popover below the item2 with arrow pointing upwards. I'm sure this is very easy to do using javascript although I haven't done it yet. But requirement here is to use CSS only.
当 item2 悬停时，我想在 item2 下方显示弹出框，箭头指向上方。我确信使用 javascript 很容易做到这一点，尽管我还没有这样做。但这里的要求是只使用 CSS。
I found this example :
我找到了这个例子：
http://demo.webinterfacelab.com/13-profile-popover/
http://demo.webinterfacelab.com/13-profile-popover/
Only difference is that I need for popover to show below the menu not above and arrow pointing upwards not downwards. Like in the image below :
唯一的区别是我需要 popover 显示在菜单下方而不是上方，箭头指向上方而不是下方。如下图所示：
Does anyone have example of how to do this? Or can help me to do this?
有没有人有如何做到这一点的例子？或者可以帮我做到这一点？
回答by Miljan Puzovi?
Man, you must learn how to use inspector :) Trick is in :afterand :beforepseudo classes.
男人，你必须学会如何使用检查:)诀窍是在:after和:before伪类。
So, here is working DEMOof that tutorial, I've changed some CSS, check it out.
所以，这是该教程的工作演示，我更改了一些 CSS，请查看。
NOTE: This is CSS3 valid demo. Those pseudo classes will not work in older browsers, and you will not see arrow. Same is with transitions, and other CSS3 fancy things. If you don't want JS, you should be aware of that.
注意：这是 CSS3 有效演示。这些伪类在旧浏览器中不起作用，您将看不到箭头。过渡和其他 CSS3 花哨的东西也是如此。如果你不想要 JS，你应该意识到这一点。
回答by Shawn Wernig
The fiddle above illustrates just one way to do this. Hope it sets you on the right track.
上面的小提琴仅说明了一种方法。希望它能让你走上正轨。
回答by Chris Frank
Look into css3 transitions (animations). You will find great tutorials filled with hover transitions, and drop down menus.
查看 css3 转换（动画）。你会发现很棒的教程，里面有悬停过渡和下拉菜单。
