Home/ Questions/Q 8674953
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T19:50:00+00:00

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

  • 0

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 :

enter image description here

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0