这是我自己打的，任务是王者官网首页打出相似的，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mzx</title>
<style>
/*
鼠标经过最大的ul时，显示ul里的ul内容
前面的ul是范围，可以选择全局或者单个列：ul li
*/
ul{
margin-left: 0px;
}
ul:hover ul{
display:block;
}
ul:hover div{
height: 300px;
}
.a{
width:1000px;
height:100px;
background-color:black;
clear:both;
margin-top:19px;
opacity:0.2;
position:absolute;/*定位，绝对定位，如果父级不是定位，则参照body*/
height: 0;
transition: all .3s ease;
}
ul li{
float:left;/*左浮动*/
list-style:none;/*去除列表样式*/
width:150px;/*宽度*/
}
ul li ul{
padding-left:0px;/*表格与内容之间的距离*/
display:none/*隐藏 inline-block*/
}
.b{
}
.c{
}
.d{
}
.e{
}
</style>
</head>
<body background="鲁班.jpg" style=" background-repeat:no-repeat ;background-size:100% 100%;
background-attachment: fixed;">
<!--一级菜单和二级菜单的显示-->
<ul style="color: white; margin-left:250px;">
<li >游戏资料
<ul >
<li>版本介绍</li>
<li>游戏介绍</li>
<li>英雄资料</li>
<li>爆料站</li>
<li>故事站</li>
<li>游戏壁纸</li>
</ul>
</li>
<li>内容中心
<ul>
<li>攻略中心</li>
<li>英雄攻略</li>
<li>视频中心</li>
<li>开放素材库</li>
<li>王者视角</li>
<li>作者入驻</li>
<li>媒体入驻</li>
</ul>
</li>
<li>赛事中心
<ul>
<li>冬季冠军杯</li>
<li>kpl</li>
<li>全国大赛</li>
<li>模拟大赛</li>
<li>K甲联赛</li>
<li>高校赛</li>
<li>全民赛</li>
<li>赛事数据</li>
</ul>
</li>
<li>百态王者
<ul>
<li>荣耀·传承</li>
<li>王者文化站</li>
<li>王者音乐听</li>
<li>万千世界</li>
<li>星光殿堂</li>
<li>商户特权</li>
<li>IP共创计划</li>
</ul>
</li>
<li>社区互动
<ul>
<li>创意互动营</li>
<li>王者营地</li>
<li>手Q部落</li>
<li>微信圈子</li>
<li>官方微博</li>
<li>微信公众号</li>
<li>手Q订阅号</li>
</ul>
</li>
<li>玩家支持
<ul>
<li>成长守护平台</li>
<li>对局环境情报站</li>
<li>客服专区</li>
<li>礼包兑换</li>
<li>自助服务</li>
</ul>
</li>
<li >IP新游
<ul>
<li>代号:破晓</li>
<li>代号:启程</li>
</ul>
</li>
<div class="a" > </div>
</ul>
</body>
</html>
