title: Css popover menu
body: <p>I want to create popover menu when certain menu item is hover-ed, my menu is like this :</p>
  
  <p>item1 | item2 | item3</p>
  
  <p>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.</p>
  
  <p>I found this example :</p>
  
  <p><a href="http://demo.webinterfacelab.com/13-profile-popover/" rel="noreferrer">http://demo.webinterfacelab.com/13-profile-popover/</a></p>
  
  <p>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 :</p>
  
  <p><img src="https://i.stack.imgur.com/iGi25.png" alt="enter image description here"></p>
  
  <p>Does anyone have example of how to do this? Or can help me to do this?</p>