在web開發中，導航條是經常使用的一個組件。css可以使用偽元素來實現一級導航菜單，但如果有二級、三級導航菜單時，我們需要使用其他方法來實現。

下面的代碼實現一個三級導航菜單：（代碼請參考pre標簽內的內容）

html, body {
margin: 0;
padding: 0;
}
nav {
background-color: #333;
color: #fff;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav > ul > li {
display: inline-block;
position: relative;
}
nav > ul > li > a {
display: block;
text-decoration: none;
padding: 10px 15px;
}
nav ul ul {
position: absolute;
left: 0;
top: 100%;
background-color: #444;
display: none;
}
nav ul ul ul {
left: 100%;
top: 0;
}
nav ul li:hover ul {
display: block;
}
nav ul ul li {
display: block;
width: 200px;
}
nav ul ul li a {
padding: 10px 15px;
}
nav ul ul ul li {
display: block;
width: 180px;
}
nav ul ul ul li a {
padding: 8px 15px;
}

通過將二級、三級菜單使用絕對定位來實現。其中，nav>ul>li:hover ul這個選擇器用來實現鼠標懸浮在一級菜單上時，顯示對應的二級菜單，nav ul ul li和nav ul ul ul li分別是二級和三級菜單的樣式。

可以根據具體需求來修改樣式，比如修改菜單高度、背景顏色、字體大小等等。

三級導航菜單可以為用戶提供更加細致的分類，提升網站的用戶體驗。在開發過程中，可以靈活運用偽元素和絕對定位等css屬性，實現更復雜的導航菜單效果。