html - 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