HTML + CSS：如何将箭头添加到水平菜单项？

Question

这是看起来像菜单栏中的项目没有悬停：

这是悬停效果：

这是我想要添加的箭头：

我目前的CSS公式如下：

ul.profile_menu {
    background: url('menu.png') repeat-x;
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;

    li {
        display: inline;
        a {
            float: left;
        }
        a:hover {
            background: url('active_item.png') repeat-x;
                    height: 45px;
        }
    }   
}

但是如何在活动项目的底部添加箭头？

提前致谢

Answer 1

您可以纯粹使用CSS本身生成箭头（当前）（没有CSS3特定的东西 - 与所有浏览器兼容）。

使用此网站生成箭头所需的CSS：http://cssarrowplease.com