CSS的二級導航菜單是網頁設計的重要組成部分之一。它提供了一種簡潔美觀的方式，使用戶可以輕松地瀏覽網站的各個部分。在下面的代碼示例中，我們將介紹如何使用CSS編寫二級導航條。

.navbar {
background-color: #333;
}
.navbar ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.navbar li {
position: relative;
flex: 1;
}
.navbar a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
.navbar ul ul {
display: none;
position: absolute;
top: 100%;
}
.navbar ul li:hover >ul {
display: inherit;
}
.navbar ul ul li {
position: relative;
margin-top: 0px;
background-color: #333;
}
.navbar ul ul ul li {
position: relative;
top: -60px;
left: 150px;
}
.navbar ul ul li:hover >ul {
display: inherit;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar ul ul ul {
position: absolute;
left: 100%;
top: 0;
}

以上代碼開頭定義了導航菜單的背景顏色為黑色（#333），并將列表樣式設置為無。此外，還設置了菜單項的位置為相對于屏幕而言的，讓每個菜單項都可以在導航條上占據相同的空間。

在菜單項的樣式中，我們將菜單項的鏈接設置為塊狀元素，這使得導航菜單在縮放過程中也可以適應不同屏幕尺寸的大小。我們還將每個UL子元素相對于其父元素絕對定位，并將其放在父元素下方的位置上，這使得在鼠標懸浮在菜單項上時，該菜單子菜單可以展現出來。

在這段代碼中，我們定義了子菜單項相對于主菜單項的位置，并將其一些樣式的值設置為了負值。這使得子菜單始終保持在主菜單的右側，而不是在屏幕上方。

通過使用CSS編寫二級導航菜單，可以使用一種簡單而有效的方法，從而可以更好地組織您的網站頁面，并使其易于使用。在使用這些樣式時，請確保您的代碼是有效的，易于理解和優化的。