前端学习中+_+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>二级页面</title>
<style type="text/css">
*{
margin:0;
padding:0;
font-size:12px;
}
.nav{
margin:10px auto;
width:486px;
background-color: #d3d3d3;
border-radius: 5px;
}
.nav>ul>li{
float:left;
position:relative;
}
.nav>ul{
list-style-type: none;
border-radius: 5px;
}
a{
text-decoration: none;
color:#86777d;
font-family:"Microsoft YaHei";
}
.nav>ul>li>a{
display:inline-block;
height:38px;
line-height: 38px;
background-color: #d3d3d3;
padding-right:16px;
padding-left:16px;
border-left:1px solid #eeeeee;
}
.nav ul li ul li a{
display:inline-block;
width:233px;
height:40px;
line-height:40px;
padding-left:16px;
border-top:1px solid #eeeeee;
-webkit-transition: all 0.4s linear;
}
.nav ul li ul{
display:none;
background-color: #d3d3d3;
border-radius: 5px;
list-style-type: none;
position:absolute;
top:38px;
left:0;
}
.nav>ul>li:hover ul{
display:block;
position:absolute;
-webkit-animation: mymove 0.3s linear forwards;
}
@-webkit-keyframes mymove {
from{
left:0;
top:43px;
}
to{
left:0;
top:38px;
}
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">Home</a>
<ul>
<li><a href="#">Web Designing</a></li>
<li><a href="#">Motion Graphics</a></li>
<li><a href="#">Web Development(PHP,Python)</a></li>
<li><a href="#">Photography</a></li>
</ul>
</li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">Web Designing</a></li>
<li><a href="#">Motion Graphics</a></li>
<li><a href="#">Web Development(PHP,Python)</a></li>
<li><a href="#">Photography</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Designing</a></li>
<li><a href="#">Motion Graphics</a></li>
<li><a href="#">Web Development(PHP,Python)</a></li>
<li><a href="#">Photography</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Web Designing</a></li>
<li><a href="#">Motion Graphics</a></li>
<li><a href="#">Web Development(PHP,Python)</a></li>
<li><a href="#">Photography</a></li>
</ul>
</li>
<li><a href="#">Talk to us</a>
<ul>
<li><a href="#">Web Designing</a></li>
<li><a href="#">Motion Graphics</a></li>
<li><a href="#">Web Development(PHP,Python)</a></li>
<li><a href="#">Photography</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>