樹狀菜單常用來展現(xiàn)網(wǎng)站或應(yīng)用中的導(dǎo)航欄，其中CSS可以很好地控制層級(jí)關(guān)系和樣式。下面介紹如何使用CSS創(chuàng)建樹狀菜單。

/* 創(chuàng)建ul和li元素 */
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
background-color: #eee;
position: relative;
margin-left: 20px;
padding: 10px;
transition: background-color 0.5s ease;
}
/* 定義子菜單最初狀態(tài) */
ul ul {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease;
}
/* 定義子菜單展開狀態(tài) */
li:hover >ul {
max-height: 500px;
}
/* 定義子菜單項(xiàng) */
li ul li {
background-color: #ccc;
margin-left: 20px;
}
/* 定義鏈接樣式 */
li a {
color: black;
text-decoration: none;
}
/* 定義鏈接懸停樣式 */
li a:hover {
color: white;
}

這段代碼創(chuàng)建了一個(gè)基本的樹狀菜單，具有父菜單和子菜單項(xiàng)。將樣式應(yīng)用到菜單的HTML元素之后，它將呈現(xiàn)一個(gè)擁有父菜單和子菜單的交互式菜單。