Question

I´m creating web page in wordpress, and I have navigation menu using
<?php wp_nav_menu(); ?> .. The problem is, I want to create hover effect, displayed in enclosed image.
http://s11.postimage.org/gclhor5hv/try.jpg

The problem is, I don´t know how to create that triangle on the bottom of the hovered list item.
Here´s the CSS:
#navHead li a:hover{
background-color: #e00d1d;
border-radius: 5px;
color: #fff!important;
background-repeat: no-repeat;
background-position: 50% 30px;
}

In HTML: navigation list is generated, so I can´t reach and edit structure, so it has to be done in CSS.

Thanks for your help.

Answer 1

This generator will generate the css for a speech bubble in CSS 3: http://cssarrowplease.com/