CSS三層菜單是一種常用的網頁導航欄設計，它能夠讓網站更美觀、整潔，也更方便用戶瀏覽。下面，我們將介紹如何使用CSS實現三層菜單。

/* CSS代碼 */
ul{
list-style:none;
padding:0;
margin:0;
}
li{
float:left;
position:relative;
}
a{
display:block;
padding:0 10px;
background-color:#f2f2f2;
color:#333;
text-decoration:none;
line-height:40px;
}
a:hover{
background-color:#ddd;
}
ul ul{
position:absolute;
left:0;
top:40px;
display:none;
}
li:hover >ul{
display:block;
}
ul ul ul{
left:100%;
top:0;
}

首先，我們對

和
• 進行基礎設置，將樣式的列表樣式、內部的邊距、外部的空白都設置為0。我們將
• 標簽設置為塊級元素，并設置相對定位，這樣可以在后續的絕對定位中起到統一的定位位置作用。

  緊接著，我們對網站鏈接進行設置。我們設置每個網站鏈接為一個塊級元素，并設置了鏈接和鏈接懸停時應用的背景色、文本顏色和字號，并設置了鏈接高度使得每個鏈接以一個合適的大小呈現在屏幕上。

  接下來，我們設置了網站鏈接所在的列表項當鼠標懸停時的樣式，這里我們將其背景顏色改變以提示用戶當前懸停的網站鏈接。我們設置了當鼠標懸停在列表項上時，當前列表項下的子菜單以絕對定位的方式向下移動40px展現出來。

  最后，我們設置了當列表項下還有下一級子菜單時，將其絕對定位至當前列表項的右側進行展現。在樣式中，我們使用了左側距離100%的方式將子菜單設置在了父級菜單的右側。

  這樣，使用CSS三層菜單的效果便呈現出來了。通過此次學習，我們可以清晰地掌握三層菜單的實現方式，并在后續的網頁設計中進行使用。