二级导航几乎是每个页面必备的功能，它也有很多实现的方法，这里介绍一个纯html+css实现出来的案例。现在网上大多数博客都是横向二级菜单的实现方法，我这里介绍一种实现纵向二级菜单的方法。
二级菜单的实现思路为：
- 在默认状态下，使用display:none;将二级菜单隐藏。
- 当一级菜单中的列表标签li获取焦点(hover)后，使用display:blick;将二级菜单显示出来。
- 使用position: relative;和position: absolute;分别得一级菜单和二级菜单设置相对定位和绝对定位。
一、效果图
二、html代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图书借阅管理系统</title>
<style type="text/css">
</style>
</head>
<body>
<div class="header" id="head">
<div class="title">图书借阅管理系统</div>
</div>
<div class="wrap" id="wrap">
<table width="100%" height=100%>
<tr height=30%>
<td width=15% rowspan="2">
<div id="menu" >
<ul>
<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>
<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>
</ul>
</div>
</td >
<td colspan="2">
<p align="center"><font size="4" color=#480000>欢迎使用图书借阅管理系统！</font></p>
</td>
</tr>
<tr height=70%>
<td width=42.5%>
<img src="http://www.zzu.edu.cn/images/fj/16.jpg" alt="some_text" width=100% >
</td>
<td width=42.5%>
<img src="http://www.zzu.edu.cn/images/fj/DSC06127.JPG" width=100% >
</td>
</table>
</div>
</div>
<div class="footer" id="foot">
<div class="copyright">
<p>Copyright © 2022 管理信息系统第八组.All Rights Reserved.</p>
</div>
</div>
</body>
</html>
三、css代码及注释
a:link{color:white;}
a:visited{color:white;}
a:hover{color:#480000;}
a:active{color:#480000;}
#menu{
width:100%;
height:100%;
}
#menu ul{
/*去掉列表的样式*/
list-style-type: none;
width: 200px;
height:100%;
background-image: linear-gradient(to bottom right, #980000 , red);
}
#menu ul li{
height: 50px;
line-height: 50px; /*行距*/
text-align: center;
position: relative;
}
a{
/*将<a>内联元素转换为块级元素，便于padding设定*/
display: block;
/*去掉链接默认样式*/
text-decoration: none;
color: #e1e1e1;
padding: 0;
}
a:hover{
background-color: #980000;
font-size: 16px;
color: #e1e1e1;
}
#menu ul li ul{
display: none;/*默认隐藏*/
top:0px;
height:100%;
width: 200px;
border:1px solid#ccc;
border-bottom: none;
position: absolute;
left: 200px;
}
#menu ul li:hover ul{
display: block;
}
#menu ul li:hover ul li a{
display: block;
background-color:#980000;
}
*{
margin: 0;
padding: 0;
}
#wrap {
height: 515px;
width: 100;
background-color:#fef6f6;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
position: relative;
}
#head {
height: 50px;
width: 100;
background-color: #480000;
text-align: center;
position: relative;
}
#foot {
width: 100;
height: 50px;
background-color: #480000;
position: relative;
}
.title {
font-family: "宋体";
color: #FFFFFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 使用css3的transform来实现 */
font-size: 24px;
height: 20px;
width: 30%;
}
.copyright {
font-family: "宋体";
color: #FFFFFF;
position: absolute;
top: 90%;
left: 50%;
transform: translate(-50%, -50%); /* 使用css3的transform来实现 */
height: 60px;
width: 40%;
text-align:center;
}
#foot .copyright p {
height: 24px;
width: 100%;
}
