CSS無圖片菱形導航，是一種美觀而實用的網站菜單設計。通過CSS實現無圖片的菱形導航，不僅可以大大減少網站的加載時間，還可以增強用戶對網站的好感度。下面我們來學習如何通過CSS實現無圖片菱形導航。

/* CSS樣式表 */
ul {
list-style:none;
margin:0;
padding:0;
}
li {
display:inline-block;
margin:0 10px;
position:relative;
}
li a {
display:block;
padding:10px;
text-align:center;
text-decoration:none;
}
li a:hover {
background-color:#7f8c8d;
color:#ffffff;
}
li ul {
list-style:none;
margin:0;
padding:0;
position:absolute;
top:40px;
left:-40px;
width:120%;
z-index:1;
text-align:center;
transform:rotate(45deg);
}
li ul li {
display:inline-block;
margin:0 10px;
transform:rotate(-45deg);
}
li ul li a {
display:block;
padding:10px;
text-align:center;
text-decoration:none;
transform:rotate(45deg);
color:#ffffff;
}
li ul li a:hover {
background-color:#3498db;
}

在CSS樣式表中，我們首先設置了ul和li元素的樣式，去掉了列表默認的道道和間距。接著，我們設置了li元素的position屬性，使子菜單可以相對于其父元素進行絕對定位。然后，我們設置了li的子元素a的樣式，包括內邊距、對齊方式和去除下劃線等。當用戶鼠標懸停在a元素上時，我們通過:hover偽類改變了背景顏色和文字顏色。

接下來，我們設置了li元素的子菜單ul的樣式，包括顯示方式、位置、大小、層級和旋轉。我們設置了子菜單li元素的樣式，去掉了默認的列表道道和間距，并對子菜單a元素進行旋轉變形。當用戶鼠標懸停在子菜單a元素上時，我們又通過:hover偽類改變了背景顏色。

通過上述CSS樣式，我們就可以實現一個美觀而實用的無圖片菱形導航了。