Css popover menu

Question

I want to create popover menu when certain menu item is hover-ed, my menu is like this :

item1 | item2 | item3

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.

I found this example :

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 :

Does anyone have example of how to do this? Or can help me to do this?

Answer 1

Man, you must learn how to use inspector :) Trick is in :after and :before pseudo classes.

So, here is working DEMO of that tutorial, I've changed some CSS, check it out.

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.

Answer 2

http://jsfiddle.net/9yeAJ/

The fiddle above illustrates just one way to do this. Hope it sets you on the right track.