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