#要用到的图片
#代码中的数据需自己调试，每一台电脑的分辨率不同，所以对应数据也不同；图片也需自己命名
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>王者荣耀</title>
<style>
body,ul,h1{
margin: 0;
padding: 0;
border: 0;
}
ul,li{
list-style: none;
}
body{
background: url(img/a.jpg) no-repeat;
}
.header{
width: 100%;
height: 84px;
background: rgba(0,0,0,0.8);
}
.header .wrap{
width: 1565px;
height: 62px;
margin: 20px auto;
/*background: red;*/
position: relative;
}
.wrap .logo{
position: absolute;
top: 15px;
}
.wrap .ulwrap{
width: 900px;
margin: 0 auto;
}
.wrap .ulwrap li{
float: left;
color: #e7e2e2;
font-size: 25px;
width: 127px;
text-align: center;
padding: 16px 0px 0px;
line-height: 30px;
height: 68px;
cursor: pointer;/*设置鼠标指针在元素上的样式为手型*/
}
.wrap .ulwrap li em{
display: block;
font-size: 12px;
color: #858792;
}
.ulwrap li:hover,.ulwrap li em:hover{
color: #e8c575;
}
.ulwrap li:hover{
background: url(img/b.png) no-repeat left top;
}
.subNav{
width: 100%;
height: 0px;
background: rgba(0,0,0,0.6);
/*溢出隐藏*/
overflow: hidden;
/*允许css属性值在一定时间区间内平滑过渡*/
/*transition-property: all;所有属性改变*/
/*transition-duration: 变换延续时间;*/
transition: all .3s ease;
}
.subNav .subULWrap{
width: 900px;
margin: -20px auto;
}
.subNav .subULWrap li{
float: left;
text-align: center;
width: 148px;
padding-top: 20px;
}
.subNav .subULWrap li a{
display: block;
color: #9494a1;
font-size: 20px;
line-height: 34px;
}
.header:hover .subNav{
height: 200px;
}
</style>
</head>
<body>
<div class="header">
<!--一级菜单-->
<div class="wrap">
<h1>
<img class="logo" src="img/c.png">
</h1>
<ul class="ulwrap">
<li>游戏资料<em>DATA</em></li>
<li>内容中心<em>CONTENTS</em></li>
<li>赛事中心<em>MATCH</em></li>
<li>百态王者<em>CULTURE</em></li>
<li>社区互动<em>COMMUNITY</em></li>
<li>玩家支持<em>PLAYER</em></li>
<li>IP新游<em>NEW GAMES</em></li>
</ul>
</div>
<!--二级菜单-->
<div class="subNav">
<ul class="subULWrap">
<li><a>版本介绍</a>
<a>游戏介绍</a>
<a>英雄资料</a>
<a>爆料站</a>
<a>世界观体验站</a>
<a>游戏壁纸</a>
</li>
<li><a>版本介绍</a>
<a>游戏介绍</a>
<a>英雄资料</a>
<a>爆料站</a>
<a>世界观体验站</a>
<a>游戏壁纸</a>
</li>
<li><a>版本介绍</a>
<a>游戏介绍</a>
<a>英雄资料</a>
<a>爆料站</a>
<a>世界观体验站</a>
<a>游戏壁纸</a>
</li>
<li><a>版本介绍</a>
<a>游戏介绍</a>
<a>英雄资料</a>
<a>爆料站</a>
<a>世界观体验站</a>
<a>游戏壁纸</a>
</li>
<li><a>版本介绍</a>
<a>游戏介绍</a>
<a>英雄资料</a>
<a>爆料站</a>
<a>世界观体验站</a>
<a>游戏壁纸</a>
</li>
<li><a>版本介绍</a>
<a>游戏介绍</a>
<a>英雄资料</a>
<a>爆料站</a>
<a>世界观体验站</a>
<a>游戏壁纸</a>
</li>
</ul>
</div>
</div>
</body>
</html>
运行结果展示
