CSS導航小三角是一種簡單卻極具視覺效果的元素，在網頁設計中被廣泛使用。下面介紹一下如何使用CSS實現導航小三角。

.nav {
position: relative;
}
.nav li {
float: left;
position: relative;
}
.nav li a {
display: block;
padding: 10px 15px;
font-size: 18px;
color: #333;
text-decoration: none;
position: relative;
}
.nav li a:hover {
background-color: #f0f0f0;
}
.nav li.active a {
background-color: #e6e6e6;
}
/* 下三角 */
.nav li.active a:after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -10px;
border-width: 10px;
border-style: solid;
border-color: transparent transparent #e6e6e6 transparent;
}

以上是一個基本的導航菜單的CSS樣式，其中重點是使用了:after偽元素來生成小三角。下面解釋一下：

• position: relative;

  給容器.nav設置相對定位，讓內部的偽元素可以相對于.nav進行定位。

• position: relative;

  給每個導航選項設置相對定位，同樣是為了讓內部的偽元素可以相對于每個選項定位。

• .nav li.active a:after { content: "";

  生成一個空白的偽元素。

• position: absolute;

  將偽元素設置為絕對定位，讓它相對于其定位父元素（即.nav li.active a）來進行定位。

• bottom: -10px;

  將偽元素定位到選項下方。

• left: 50%;

  設置偽元素在選項水平居中。

• margin-left: -10px;

  將偽元素往左移動其自身寬度的一半，以使其水平居中。

• border-width: 10px;

  設置邊框寬度。

• border-style: solid;

  設置邊框樣式為實線。

• border-color: transparent transparent #e6e6e6 transparent;

  設置邊框顏色，即右側為灰色而其它為透明。

因此，以上Code即可實現一個簡單的帶有小三角的導航菜單。