我们在很多网站浏览时,通常会遇到很多二级菜单栏,通常它们是隐藏起来的,只有我们鼠标移过去后,它们才会显现出来,比如说下面这张图片。
但是我们如何实现类似的效果呢?下面我们仅使用 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>