banner.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style type="text/css">
*{
padding: 0;margin: 0;
}
ul {
list-style: none;
margin: 100px auto;
width: 900px;
height: 60px;
/*overflow: hidden;*/
}
ul li{
width: 150px;
height: 60px;
float: left;
cursor: pointer;
overflow: hidden;
}
ul li p{
width: 150px;
height: 56px;
border-bottom:4px solid #ccc;
font-size: 14px;
font-family: '微软雅黑';
text-align: center;
line-height: 60px;
transition:1s all ease-in-out;
}
p:first-child{
background: orange;
color:#fff;
border-color: pink;
}
p:last-child{
background: #ccc;
color:orange;
border-color:greenyellow;
}
ul li:hover p{
transform: translateY(-100%);
}
</style>
</head>
<body>
<ul>
<li>
<p>1606 dayday up</p>
<p>1606 dayday up</p>
</li>
<li>
<p>1606 dayday up</p>
<p>1606 dayday up</p>
</li>
<li>
<p>1606 dayday up</p>
<p>1606 dayday up</p>
</li>
<li>
<p>1606 dayday up</p>
<p>1606 dayday up</p>
</li>
<li>
<p>1606 dayday up</p>
<p>1606 dayday up</p>
</li>
<li>
<p>1606 dayday up</p>
<p>1606 dayday up</p>
</li>
</ul>
</body>
</html>
