怎么来做一个简单的二级导航栏呢？
用最基础的HTML+CSS来实现：
本文章不追求多少美的视觉效果，主要是提供思路，授人以鱼不如授人以渔！
1. 写好菜单栏代码，让二级菜单栏嵌入在一级菜单栏代码之内
HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>二级导航栏</title> <link rel="stylesheet" href="../../reset.css/reset.css"> <link rel="stylesheet" href="index.css"> </head> <body> <header> <!-- 外层容器 --> <div class="nav"> <!-- 整个导航栏 --> <ul class="menu"> <!-- 一级菜单 --> <li> <a href="#">首页</a> <!-- 二级菜单 --> <ul> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> </ul> </li> <li> <!-- 一级菜单 --> <a href="#">论坛</a> <!-- 二级菜单 --> <ul> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> <li><a href="">二级菜单</a></li> </ul> </li> <li><a href="#">下载</a></li> <li><a href="#">会员</a></li> <li><a href="#">联系我们</a></li> </ul> </div> </header> </body> </html>2. 对外层容器、整个导航栏定宽高，导航栏居中
3. 对菜单项<li>设置左浮动
4. 对菜单项内容<a>设置具体效果
5. 隐藏二级菜单栏
6. 让二级菜单在点击一级菜单项时才会出现
7. 清除二级菜单的浮动
CSS代码：
/* 整个外层容器的宽高 */ .nav { width: 100%; height: 40px; } /* 整个导航栏的宽高 */ .nav .menu { width: 1190px; /* 导航栏居中 */ margin: 0 auto; height: 100%; box-sizing: border-box; } .nav li { /* 对其菜单项左浮动，呈横向排列 */ float: left; } /* 设置菜单项里的文字内容 */ .nav ul li a:link, .nav ul li a:visited{ display: inline-block; width: 238px; height: 40px; line-height: 40px; color: #fff; text-align: center; background: pink; } /* 设置菜单项里文字点击的效果颜色 */ .nav ul li a:hover, .nav ul li a:active { background: lightpink; } /* 隐藏二级菜单 */ .nav ul li ul { display: none; position: absolute; } /* 让二级菜单在点击一级菜单项时才会出现 */ .nav ul li:hover ul { display: block; } /* 清除二级菜单的浮动 */ .nav ul li ul li { float: none; background: lightpink; }效果图奉上：
大概的思路就是这样啦，最简单初级的二级菜单栏模型，具体的美化效果与调整，还需要自己根据实际情况去写！
