CSS3 是 Web 技術(shù)中最受青睞的一種技術(shù)，用它來制作三級子菜單也是非常簡單的。下面我們就一起來看看怎樣使用 CSS3 來制作三級子菜單吧！

/* 定義 ul 元素的樣式 */
ul {
list-style: none;
margin: 0;
padding: 0;
width: 200px;
}
/* 定義一級菜單的樣式 */
li {
background-color: #eee;
border: 1px solid #ccc;
margin-bottom: 1px;
position: relative;
}
/* 定義鼠標(biāo)懸停時的樣式 */
li:hover {
background-color: #ccc;
cursor: pointer;
}
/* 定義二級菜單的樣式 */
li ul {
display: none;
position: absolute;
top: 0;
left: 200px;
width: 200px;
z-index: 1;
}
/* 定義懸停在一級菜單上時的二級菜單的樣式 */
li:hover >ul {
display: block;
}
/* 定義三級菜單的樣式 */
li ul li {
background-color: #ccc;
border: none;
margin: 0;
}
/* 定義鼠標(biāo)懸停時的樣式 */
li ul li:hover {
background-color: #aaa;
cursor: pointer;
}
/* 定義四級菜單的樣式 */
li ul li ul {
display: none;
position: absolute;
top: 0;
left: 200px;
width: 200px;
z-index: 1;
}
/* 定義懸停在三級菜單上時的四級菜單的樣式 */
li ul li:hover >ul {
display: block;
}

以上就是制作三級子菜單的 CSS 樣式，看起來是不是很簡單呢？我們只需要為 `ul`、`li` 以及它們的偽類定義一些樣式就可以了。