今天我们来练习一下二级菜单栏，说实话比较简单，但是自己一个人写的时候错误百出，逻辑混乱，于是乎网上找了几个案例，借鉴了一下思路，才整明白，鄙人确实不才，哈哈！
效果图附上：
首先：我已链接了外部样式重置，所以无需自己亲自写：
reset.css网上有很多，我用的是下面这个，免费分享给大家，永久有效哦！
链接：https://pan.baidu.com/s/1doPA17vy--QtSzUB8q9b8w
提取码：qq4o
HTML：代码：
<!-- 外部样式表reset.css -->
<link rel="stylesheet" href="reset.css">
<!-- 外部样式表二级菜单 -->
<link rel="stylesheet" href="style.css">注意：以下我写的所有样式，必须要用reset.css外部样式表！！
1. 首先，我们来创建一个容器，用来放置整个导航栏：
HTML代码：
<div class="topmenu"></div>CSS代码：
/* 设置整个容器宽高背景色 */
.topmenu {
width: 100%;
height: 50px;
background: lightgreen;
}效果图：只有一个绿色的条哈！
2. 接下来我们要在.topmenu 容器中添加内容：
HTML代码：
<div class="topmenu">
<!-- nav 整个导航栏 -->
<ul class="nav">
<!-- 一级菜单 -->
<li class="nav-container">
<a href="https://blog.csdn.net/weixin_36732046">我的博客</a>
</li>
<!-- 一级菜单 w3school -->
<li class="nav-container">
<a href="https://www.w3school.com.cn/">W3school</a>
</li>
<!-- 一级菜单 菜鸟教程 -->
<li class="nav-container">
<a href="https://www.runoob.com/">菜鸟教程</a>
</li>
</ul>
</div>CSS代码：
/* 一级菜单栏.nav-container设置 */
.topmenu .nav .nav-container {
float: left; /* 一级菜单设置左浮动，使其水平排列 */
background: lightgreen; /*给整个一级菜单设置背景色（二级菜单包括在一级菜单中）*/
text-align: center; /* 对齐方式为居中 */
width: 155px; /*设置宽度*/
border-right:solid 2px #fff; /*使用右边框分割*/
}
设置字体行高和颜色：
a {
line-height: 50px;
color: #fff;
}3. 一级菜单栏写完啦，接下来写二级菜单栏，把二级菜单栏添加到一级的<li>下面：
附上完整的HTML代码：
<div class="topmenu">
<!-- nav 整个导航栏 -->
<ul class="nav">
<!-- 一级菜单 -->
<li class="nav-container">
<a href="https://blog.csdn.net/weixin_36732046">我的博客</a>
<!-- 二级菜单 -->
<ul class="nav-list">
<li>
<a href="https://blog.csdn.net/weixin_36732046/category_9560702.html">工具安装</a>
</li>
<li>
<a href="https://blog.csdn.net/weixin_36732046/category_8012920.html">问题解决</a>
</li>
<li>
<a href="https://blog.csdn.net/weixin_36732046/category_8527355.html">实战案例</a>
</li>
<li>
<a href="https://blog.csdn.net/weixin_36732046/category_8078929.html">Js函数</a>
</li>
</ul>
</li>
<li class="nav-container">
<!-- 一级菜单 w3school -->
<a href="https://www.w3school.com.cn/">W3school</a>
<!-- 二级菜单 -->
<ul class="nav-list">
<li>
<a href="https://www.w3school.com.cn/html/index.asp">HTML</a>
</li>
<li>
<a href="https://www.w3school.com.cn/html5/index.asp">HTML5</a>
</li>
<li>
<a href="https://www.w3school.com.cn/html5/index.asp">CSS</a>
</li>
<li>
<a href="https://www.w3school.com.cn/css3/index.asp">CSS3</a>
</li>
</ul>
</li>
<li class="nav-container">
<!-- 一级菜单 菜鸟教程 -->
<a href="https://www.runoob.com/">菜鸟教程</a>
<!-- 二级菜单 -->
<ul class="nav-list">
<li><a href="https://www.runoob.com/bootstrap/bootstrap-tutorial.html">Bootstrap 教程</a></li>
<li><a href="https://www.runoob.com/foundation/foundation-tutorial.html">Foundation5 教程</a></li>
<li><a href="https://www.runoob.com/js/js-tutorial.html">JavaScript 教程</a></li>
<li><a href="https://www.runoob.com/angularjs/angularjs-tutorial.html">CSS3 教程</a></li>
<li><a href="https://www.runoob.com/json/json-tutorial.html">JSON 教程</a></li>
</ul>
</li>
</ul> <!-- nav 整个导航栏结束 -->
</div>效果图：
3. 我们完成的差不多了，现在只需要把二级菜单栏隐藏，然后让它点击对应的一级菜单栏的时候再出现就行了。
CSS代码：
/* 隐藏二级菜单 */
.topmenu .nav .nav-container .nav-list {
display: none;
}
/*点击一级菜单的时候显示二级菜单*/
.topmenu .nav .nav-container:hover .nav-list {
display: list-item;
}
/*点击时变色*/
.topmenu li:hover{
background: lightskyblue;
}
4. 好啦！已经全部做完啦！ 网页背景是我自己添加的，为了美化视觉效果用！
CSS代码：
/* 网页背景图片 */
body {
background:url(http://attach.bbs.miui.com/forum/201202/18/090658g5shfjyixlhwjyyi.jpg);
}效果图参考页面最顶部！！
