帶有二級欄目的導(dǎo)航菜單通常需要使用嵌套的無序列表（<ul>）結(jié)構(gòu)，并且可能需要一些額外的CSS來處理子菜單的顯示方式，如下拉或者側(cè)邊展開。
在這個例子中，我們使用了兩個CSS類：.menu 用來定義主菜單的樣式，.submenu 用來定義二級菜單的樣式。二級菜單默認(rèn)是隱藏的（display: none;），當(dāng)鼠標(biāo)懸停在主菜單的相應(yīng)項上時，二級菜單才會顯示出來（.menu li:hover .submenu { display: block; }）。
請注意，這只是一個簡單的靜態(tài)實現(xiàn)，并沒有考慮一些更復(fù)雜的情況，比如響應(yīng)式設(shè)計、動畫效果或JavaScript交互。如果你需要更復(fù)雜的導(dǎo)航菜單，你可能需要使用JavaScript或者引入一個現(xiàn)成的導(dǎo)航菜單庫，如Bootstrap等。
以下是一個簡單的帶有二級欄目的導(dǎo)航菜單的HTML和CSS代碼示例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="styles.css"> <title>帶有二級欄目的導(dǎo)航菜單</title> </head> <body> <nav> <ul class="menu"> <li><a href="#">首頁</a></li> <li> <a href="#">關(guān)于我們</a> <ul class="submenu"> <li><a href="#">公司介紹</a></li> <li><a href="#">發(fā)展歷程</a></li> <li><a href="#">聯(lián)系信息</a></li> </ul> </li> <li> <a href="#">服務(wù)</a> <ul class="submenu"> <li><a href="#">技術(shù)支持</a></li> <li><a href="#">售后服務(wù)</a></li> </ul> </li> <li><a href="#">產(chǎn)品</a></li> <li><a href="#">聯(lián)系我們</a></li> </ul> </nav> </body> </html>
nav background-color: #333;
}
.menu, .submenu {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
position: relative;
display: inline-block;
}
.menu li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.menu li a:hover {
background-color: #111;
}
.submenu {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
z-index: 1;
}
.submenu li {
float: none;
display: block;
}
.menu li:hover .submenu {
display: block;
}