- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <style>
- .a{
- font-size: 18px;
- font-weight: bold;
- list-style: none;
- border-bottom: 8px solid royalblue;
- overflow: auto;
- }
- .a li{
- float: left;
- margin-left: 2px;
- }
- .a li a{
- text-decoration: none;
- line-height: 40px;
- background: #DDDDDD;
- color: #666666;
- display: block;
- width: 180px;
- text-align: center;
- }
- .a li a span{
- display: none;
- }
- .a li a:hover span{
- display: block;
- background: royalblue;
- color: white;
- }
- .a li a:hover{
- margin-top: -40px;
- }
- </style>
- <body>
- <ul class="a">
- <li><a href="#"> 首页 < span>Home</span></a></li>
- <li><a href="#"> 课程大厅 < span>Course</span></a></li>
- <li><a href="#"> 学习中心 < span>Learn</span></a></li>
- </ul>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-2728618.html