//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>the final project</title>
<link rel="stylesheet" href="css/finalproject.css" />
<script src="js/finalproject.js" ></script>
<style>
*{
padding:0px;
margin:0px;
}
.bkgimg
{
background-image: url("img/b.jpg");
background-repeat: repeat;
}
</style>
</head>
<body onload="chk()" class="bkgimg">
<center>
</br>
<!--书籍系列介绍start-->
<div id="Bseries">
<span id="AT" style="margin-left: 0px;">书籍系列</span>
</br>
<div id="BS1">
<ul>
<div class="book" id="B1">
<li>
<span class="namespan">第一卷 七星鲁王</span>
<ul>
<li><a href="#">第一章 血尸</a></li>
<li><a href="#">第二章五十年后</a></li>
<li><a href="#">第三章 瓜子庙</a></li>
<li><a href="#">……</a></li>
</ul>
</li>
</div>
<div class="book" id="B2">
<li>
<span class="namespan"> 第二卷 怒海潜沙</span>
<ul>
<li><a href="#">第一章 蛇眉铜鱼</a></li>
<li><a href="#">第二章 双层墓墙</a></li>
<li><a href="#">第三章 大风暴</a></li>
<li><a href="#">……</a></li>
</ul>
</li>
</div>
<div class="book" id="B3">
<li>
<span class="namespan">第三卷 秦岭神树</span>
<ul>
<li><a href="#">第一章 老痒出狱</a></li>
<li><a href="#">第二章 六角铃铛</a></li>
<li><a href="#">第三章 跟踪</a></li>
<li><a href="#">……</a></li>
</ul>
</li>
</div>
</ul>
</div>
</br>
<div id="BS2">
<ul>
<div class="book" id="B4">
<li>
<span class="namespan">第四卷 云顶天宫（上）</span>
<ul>
<li><a href="#">第一章 新的消息</a></li>
<li><a href="#">第二章 二零零七第一炮</a></li>
<li><a href="#">第三章 镜儿宫</a></li>
<li><a href="#">……</a></li>
</ul>
</li>
</div>
<div class="book" id="B5">
<li>
<span class="namespan">第五卷 云顶天宫（下）</span>
<ul>
<li><a href="#">第一章 五圣雪山</a></li>
<li><a href="#">第二章 自杀行为</a></li>
<li><a href="#">第三章 雪崩</a></li>
<li><a href="#">……</a></li>
</ul>
</li>
</div>
<div class="book" id="B6">
<li>
<span class="namespan">第六卷 蛇沼鬼城（上）</span>
<ul>
<li><a href="#">第一章 三叔的醒来</a></li>
<li><a href="#">第二章 往事不堪回首</a></li>
<li><a href="#">第三章 WHO ARE YOU？</a></li>
<li><a href="#">……</a></li>
</ul>
</li>
</div>
</ul>
</div>
</br>
<div id="BS3">
<ul>
<div class="book" id="B7">
<li>
<span class="namespan">第七卷 蛇沼鬼城（中）</span>
<ul>
<li><a href="#">第一章 稀客</a></li>
<li><a href="#">第二章 新的线索</a></li>
<li><a href="#">第三章 录像带里的老宅</a></li>
<li><a href="#">……</a></li>
</ul>
</li>
</div>
<div class="book" id="B8">
<li>
<span class="namespan">第八卷 蛇沼鬼城（下）</span>
<ul>
<li><a href="#">第一章 追击</a></li>
<li><a href="#">第二章 消失了</a></li>
<li><a href="#">第三章 信号烟</a></li>
<li><a href="#">……</a></li>
</ul>
</li>
</div>
<div class="book" id="B9">
<li>
<span class="namespan"> 第九卷 迷海归巢</span>
<ul>
<li><a href="#">第一章 集结号</a></li>
<li><a href="#">第二章 深入</a></li>
<li><a href="#">第三章 记号</a></li>
<li><a href="#">……</a></li>
</ul>
</li>
</div>
</ul>
</div>
</br>
<div id="BS4">
<ul>
<div class="book" id="B10">
<li>
<span class="namespan">第二季之邛笼石影</span>
<ul>
<li><a href="#">第一章 兜圈</a></li>
<li><a href="#">第二章 老档案</a></li>
<li><a href="#">第三章 笔迹</a></li>
<li><a href="#">……</a></li>
</ul>
</li>
</div>
<div class="book" id="B11">
<li>
<span class="namespan">大结局（上）</span>
<ul>
<li><a href="#">第一章 吴邪心中的另一个人</a></li>
<li><a href="#">第二章 由内而外的破绽</a></li>
<li><a href="#">第三章 王八邱</a></li>
<li><a href="#">……</a></li>
</ul>
</li>
</div>
<div class="book" id="B12">
<li>
<span class="namespan">大结局（下）</span>
<ul>
<li><a href="#">第一章 张起灵这个名字的意义</a></li>
<li><a href="#">第二章 张启山其人</a></li>
<li><a href="#">第三章 所有人都死了</a></li>
<li><a href="#">……</a></li>
</ul>
</li>
</div>
</ul>
</div>
</br>
<div id="BS5">
<ul>
<div class="book" id="B13">
<li>
<span class="namespan">后续系列</span>
<ul>
<li><a href="#">《藏海花》系列</a></li>
<li><a href="#">《沙海》系列</a></li>
<li><a href="#">《重启》系列</a></li>
<li><a href="#">……</a></li>
</ul>
</li>
</div>
</ul>
</div>
</div>
<!--书籍系列介绍end-->
</center>
</body>
</html>
///.css
#Bseries
{
width:90%;
}
.book{
width:250px;
height:50px;
line-height: 50px;
background-color: #ccc;
color:#1a1d22;
font-size: 20px;
font-weight: bold;
font-family: "微软雅黑";
}
#BS1,#BS2,#BS3,#BS4,#BS5{
width:100%;
height:50px;
}
#B1,#B4,#B7,#B10,#B13
{
float:left;
}
#B2,#B5,#B8,#B11
{
float:left;
margin-left: 130px;
}
#B3,#B6,#B9,#B12
{
float:right;
}
ul li ul{
display:none;
z-index: 10;
}
div ul li:hover ul{
display:block ;
font-weight: bold;
z-index: 10;
}
div ul li:hover span{
font-weight: bold;
font-size: 20px;
color:antiquewhite;
background-color: #495E6F;
border-radius: 2px;
z-index: 10;
}
div ul li ul li{
background-color: #c0c0c0;
color:#1A1D22;
width:250px;
z-index: 10;
}
li{
list-style-type: none;
width:250px;
height:50px;
line-height: 50px;
align-content: center;
z-index: 1;
}
