html - 导航菜单中的悬停效果（wordpress）

Question

我在 wordpress 中创建网页，我有导航菜单使用 <?php wp_nav_menu(); ?>.. 问题是，我想创建悬停效果，显示在封闭的图像中。 http://s11.postimage.org/gclhor5hv/try.jpg

问题是，我不知道如何在悬停列表项的底部创建那个三角形。这是CSS：
#navHead li a:hover{
background-color: #e00d1d;
border-radius: 5px;
color: #fff!important;
background-repeat: no-repeat;
background-position: 50% 30px;
}

在 HTML 中：生成导航列表，因此我无法访问和编辑结构，因此必须在 CSS 中完成。

谢谢你的帮助。

Answer 1

这个生成器将为 CSS 3 中的气泡生成 css：http: //cssarrowplease.com/