我们在很多网站浏览时，通常会遇到很多二级菜单栏，通常它们是隐藏起来的，只有我们鼠标移过去后，它们才会显现出来，比如说下面这张图片。
但是我们如何实现类似的效果呢？下面我们仅使用 HTML+ CSS来实现一个简单的二级菜单栏。
1.首先，我们先创建一级菜单。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul { /*去除内外边距*/margin: 0px;padding: 0px;}li { /*去除开头的黑点*/list-style: none;background-color: cornflowerblue;}a {text-decoration: none; /*去除文字下划线*/line-height: 36px;}.firstMenu {width: 100%;height: 36px;background-color: cornflowerblue;}.firstMenu .menu-one .menu {float: left; /*设置浮动*/text-align: center;width: 100px;border-right: 2px solid white; /*设置右边框，用来划分元素*/}</style></head><body><div class="firstMenu"><ul class="menu-one"><li class="menu"><a href="">学校简介</a></li><li class="menu"><a href="">人才培养</a></li><li class="menu"><a href="">科学研究</a></li><li class="menu"><a href="">招生就业</a></li></ul></div></body></html>
效果图如下：
2.接下来，写二级菜单栏，把它添加到一级菜单中的 li 里面。 部分代码如下（只写了一个，其他与第一个格式相同）：
<li class="menu"><a href="">学校简介</a><ul class="menu-two"><li><a href="">学校简介</a></li><li><a href="">历史沿革</a></li><li><a href="">现任领导</a></li><li><a href="">校园风光</a></li></ul></li>
效果图如下：
3.最后，就是将二级菜单栏隐藏起来，只有鼠标放到对应的一级菜单上时，二级菜单才会显示。
CSS代码如下：
.firstMenu .menu-one .menu .menu-two { /*正常情况下二级菜单不显示*/display: none;}.firstMenu .menu-one .menu:hover .menu-two { /*当鼠标悬浮在对应的一级菜单时，显示内容*/display: block;}
最终的效果图就是下面这样：
完整代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul { /*去除内外边距*/margin: 0px;padding: 0px;}li { /*去除开头的黑点*/list-style: none;background-color: cornflowerblue;}a {text-decoration: none; /*去除文字下划线*/line-height: 36px;}.firstMenu {width: 100%;height: 36px;background-color: cornflowerblue;}.firstMenu .menu-one .menu {float: left;text-align: center;width: 100px;border-right: 2px solid white; /*设置右边框，用来划分元素*/}.firstMenu .menu-one .menu .menu-two { /*正常情况下二级菜单不显示*/display: none;}/*当鼠标悬浮在对应的一级菜单时，显示内容*/.firstMenu .menu-one .menu:hover .menu-two {display: block;}</style></head><body><div class="firstMenu"><ul class="menu-one"><li class="menu"><a href="">学校简介</a><ul class="menu-two"><li><a href="">学校简介</a></li><li><a href="">历史沿革</a></li><li><a href="">现任领导</a></li><li><a href="">校园风光</a></li></ul></li><li class="menu"><a href="">人才培养</a><ul class="menu-two"><li><a href="">本科生教育</a></li><li><a href="">研究所教育</a></li><li><a href="">留学生教育</a></li></ul></li><li class="menu"><a href="">科学研究</a><ul class="menu-two"><li><a href="">科研成果</a></li><li><a href="">社科成果</a></li><li><a href="">重点实验室</a></li></ul></li><li class="menu"><a href="">招生就业</a><ul class="menu-two"><li><a href="">本科生招生</a></li><li><a href="">研究生招生</a></li><li><a href="">留学生招生</a></li><li><a href="">就业服务</a></li></ul></li></ul></div></body></html>
