带有二级栏目的导航菜单通常需要使用嵌套的无序列表（<ul>）结构，并且可能需要一些额外的CSS来处理子菜单的显示方式，如下拉或者侧边展开。
在这个例子中，我们使用了两个CSS类：.menu 用来定义主菜单的样式，.submenu 用来定义二级菜单的样式。二级菜单默认是隐藏的（display: none;），当鼠标悬停在主菜单的相应项上时，二级菜单才会显示出来（.menu li:hover .submenu { display: block; }）。
请注意，这只是一个简单的静态实现，并没有考虑一些更复杂的情况，比如响应式设计、动画效果或JavaScript交互。如果你需要更复杂的导航菜单，你可能需要使用JavaScript或者引入一个现成的导航菜单库，如Bootstrap等。
以下是一个简单的带有二级栏目的导航菜单的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>带有二级栏目的导航菜单</title> </head> <body> <nav> <ul class="menu"> <li><a href="#">首页</a></li> <li> <a href="#">关于我们</a> <ul class="submenu"> <li><a href="#">公司介绍</a></li> <li><a href="#">发展历程</a></li> <li><a href="#">联系信息</a></li> </ul> </li> <li> <a href="#">服务</a> <ul class="submenu"> <li><a href="#">技术支持</a></li> <li><a href="#">售后服务</a></li> </ul> </li> <li><a href="#">产品</a></li> <li><a href="#">联系我们</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;
}