二級菜單是網頁中常見的菜單類型，它通常是在主菜單下方的菜單，用于顯示更多的導航選項。在這篇文章中，我們將討論如何使用CSS實現二級菜單。

首先，我們需要創建一個包含主菜單和二級菜單的HTML結構。下面是我們的HTML代碼：

<nav class="menu">
<ul>
<li><a href="#">主菜單1</a></li>
<li><a href="#">主菜單2</a>
<ul>
<li><a href="#">二級菜單1</a></li>
<li><a href="#">二級菜單2</a></li>
<li><a href="#">二級菜單3</a></li>
</ul>
</li>
<li><a href="#">主菜單3</a></li>
</ul>
</nav>

這里我們使用了一個無序列表，并在其中創建了三個列表項。第二個列表項包含了一個包含三個二級菜單選項的子菜單。

接下來，我們使用CSS來樣式化這個菜單。首先，我們要將子菜單隱藏起來：

.menu ul ul {
display: none;
}

然后，當鼠標懸停在包含二級菜單的主菜單上時，我們要顯示這個子菜單：

.menu li:hover > ul {
display: block;
}

這段代碼使用了CSS選擇器“>”，它是直接子元素選擇器，它表示只選擇指定元素的直接子元素。

還可以添加一些其他樣式來美化菜單，如背景顏色、字體、邊框等等。下面是完整的CSS代碼：

.menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.menu ul li {
display: inline-block;
position: relative;
}
.menu ul li a {
display: block;
padding: 10px 20px;
color: #333;
text-decoration: none;
}
.menu ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
padding: 0;
margin-top: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.menu ul ul li {
display: block;
width: 100%;
}
.menu ul ul li a {
display: block;
padding: 10px 20px;
color: #333;
text-decoration: none;
}
.menu li:hover > ul {
display: block;
}

現在，當我們鼠標懸停在包含二級菜單的主菜單上時，子菜單將顯示出來，而當鼠標離開菜單時，子菜單將隱藏。這就是如何使用CSS實現二級菜單。