变换菜单

实现方法：下面的元素开始不显示，当划过时显示并且整体向上移，则就有变换的菜单效果

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>变换菜单</title>
   <style type="text/css">
      *{
         margin: 0px;
         padding: 0px;
      }
      ul{
         list-style-type: none;
      }
      #nav{
         font-size: 12px;
         font-weight: bold;
         /*border-bottom: 8px solid #DC4E1B;
         /*包裹上有浮动的元素*/
         /*overflow: auto;*/
         width: 800px;
         background-color: #000;
      }
      ul li a{
         text-decoration: none;
         background: #ddd;
         line-height: 20px;
         display: block;
         text-align: center;
         width: 80px;
         color: #000;
      }
      ul li{
         float: left;
         margin-right: 1px;    
         
      }
      #nav li a span{
         display: none;
      }
      #nav li a:hover span{
         display: block;
      }
      #nav li a:hover{
         margin-top: -20px;
      }
   </style>
</head>
<body>
   <div>
      <ul id="nav">
         <li><a href="#">首页<span>Home</span></a></li>
         <li><a href="#">课程大厅<span>Course</span></a></li>
         <li><a href="#">学习中心<span>Learn</span></a></li>
         <li><a href="#">经典案例<span>Case</span></a></li>
         <li><a href="#">关于我们<span>About</span></a></li>
      </ul>
   </div>
</body>
</html>
posted @ 2016-11-03 14:45  DengPan  阅读(176)  评论(0)  编辑  收藏  举报