3級菜單是網頁中常見的一種導航菜單，它可以讓用戶更快速地找到所需要的內容。下面我們就來學習一下如何使用CSS樣式來制作一個簡單的3級菜單。

首先，我們需要在HTML頁面中創建一個含有3級菜單的結構。例如：

<ul class="menu">
<li>一級菜單1
<ul>
<li>二級菜單1-1
<ul>
<li>三級菜單1-1-1</li>
<li>三級菜單1-1-2</li>
</ul>
</li>
<li>二級菜單1-2</li>
</ul>
</li>
<li>一級菜單2
<ul>
<li>二級菜單2-1</li>
<li>二級菜單2-2</li>
</ul>
</li>
</ul>

在以上代碼中，我們使用了<ul>和<li>標簽來創建菜單的結構，其中可以嵌套子菜單。接下來，我們給菜單添加樣式。

首先，我們要去掉菜單默認的樣式，可以使用以下代碼：

.menu {
list-style: none;
padding: 0;
margin: 0;
}

這樣可以去掉菜單前面的點和默認的縮進。接著，我們可以為菜單項添加背景色、鼠標懸停效果等等。例如：

.menu li {
background-color: #EEEEEE;
padding: 10px;
border-bottom: 1px solid #CCCCCC;
}
.menu li:hover {
background-color: #CCCCCC;
}

這樣可以讓菜單項在鼠標懸停時變換背景色，增加用戶體驗。接下來，我們要處理菜單的子菜單。我們可以用以下代碼來顯示和隱藏子菜單：

.menu ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
.menu li:hover > ul {
display: block;
}

這樣可以讓子菜單在鼠標懸停時顯示出來。另外，我們還可以為子菜單添加動畫效果，讓菜單更加生動。例如：

.menu ul {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.menu li:hover > ul {
opacity: 1;
}

這樣可以讓子菜單漸變顯示和隱藏。最后，我們要調整菜單的層級關系，使其在頁面中正確顯示。例如：

.menu li {
position: relative;
}
.menu ul ul {
left: 100%;
top: 0;
}

這樣可以讓子菜單相對于其父級菜單對齊，不會出現重疊的問題。

綜上所述，以上就是一些簡單的示例代碼，可以用來制作一個基本的3級菜單。當然，菜單的樣式和效果還可以根據需求進行更加高級的定制。