CSS箭頭菜單是一種常見的導航類型，它通常用于網站的頂部菜單或側邊欄菜單中。它使用CSS樣式來渲染一個具有箭頭的菜單列表。

.arrow-menu {
list-style: none;
margin: 0;
padding: 0;
}
.arrow-menu li {
position: relative;
}
.arrow-menu li:hover >ul {
display: block;
}
.arrow-menu li >ul {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 999;
padding: 0;
}
.arrow-menu li >ul li {
width: 100%;
}
.arrow-menu li >a {
display: block;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
}
.arrow-menu li >a:after {
content: "\f0d7";
font-family: FontAwesome;
margin-left: 10px;
}
.arrow-menu li:hover >a:after {
content: "\f0d8";
}
.arrow-menu li ul li >a {
display: block;
background: #eee;
}
.arrow-menu li ul li:hover >a {
background: #ccc;
}

在上面的代碼中，我們首先創建了一個無序列表（class為“arrow-menu”），并將其margin和padding設置為0。接下來，在每個列表項（li）上設置position為relative，關鍵是為了給后面的子菜單進行定位。此外，為了實現鼠標懸停顯示下拉菜單的效果，在每個列表項上都使用了:hover偽類。

當鼠標懸停在列表項上時，我們設置子菜單（ul）的display屬性為block，以便它們顯示。我們還為子菜單設置了絕對定位，這樣它們就可以在父菜單項下方正確顯示。

我們還定義了箭頭，我們使用FontAwesome圖標庫中的一個字體圖標(f0d7)，并使用:before偽類顯示它。當鼠標懸停在列表項上時，我們改變箭頭的樣式，來表示當前的狀態。

總之，使用CSS箭頭菜單可以輕松創建網站的導航菜單。它不僅簡單易用，還有很多定制化的空間，可以根據你的需要來改變樣式。