在網頁設計中，菜單欄是不可缺少的元素之一。今天我們將介紹如何制作一個橫向三級菜單欄，實現更加復雜的網站導航。 首先，我們需要了解CSS中的懸浮和層次關系。我們將使用懸浮效果來使菜單欄打開并展示子菜單。而層次關系則是用于將子菜單放置在父菜單下方。 代碼如下：

/*設置菜單欄樣式*/
nav ul{
list-style:none;
margin:0;
padding:0;
background-color:#333;
}
/*設置列表樣式*/
nav ul li{
display:inline-block;
}
/*設置菜單鏈接樣式*/
nav ul li a{
display:block;
padding:0 10px;
color:#fff;
font-size:20px;
line-height:60px;
text-decoration:none;
}
/*鼠標懸浮效果*/
nav ul li:hover{
background-color:#555;
}
/*懸浮打開子菜單*/
nav ul ul{
display:none;
position:absolute;
top:60px;
}
/*子菜單樣式*/
nav ul ul li{
display:block;
}
/*子鏈接樣式*/
nav ul ul li a{
padding:10px;
color:#fff;
font-size:18px;
text-decoration:none;
}
/*鼠標懸浮效果*/
nav ul ul li:hover{
background-color:#555;
}
/*懸浮打開兒子子菜單*/
nav ul ul ul{
left:100%;
top:0;
}

使用以上代碼，我們可以制作出一個簡單的橫向三級菜單欄，實現更加復雜的頁面導航。希望這篇文章能夠幫助到你！