发新话题
打印

这个效果 怎么不让他下移啊

这个效果 怎么不让他下移啊

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #top{
            margin:0 0 20px 0;
        }
        a{
            text-decoration: none;
            color: #666666;
            font-size: 18px;
            display:inline-block;
            padding:20px 0 0 0;
            font-family: 'Microsoft YaHei',"Lucida Grande",
            Helvetica,Arial,Verdana,sans-serif;

        }
     li{
            list-style: none;
            padding: 0 0 30px;
            width: 64px;
            text-align: center;
            color: #777;
            display: block;
            text-decoration: none;
            float: left;
        }


        li span{
            transition:height 1s;
            -webkit-transition:height 1s;
            display: block;
            margin:0 0 10px;
            background:inherit;
            height:2px;
        }
     li:hover span{
            background:#1E90FF ;
            height:10px;

     }
        li:hover a{
            color:#000000;
            font-weight: 500;
        }

        #trans a{
            clear:both;
           margin:20px;
            width:160px;
            height:120px;
            color:#000000;
            font-size: 18px;
          position: absolute;
          top:100px;
        }

    </style>
</head>
<body>
<div id='top'>
<ul>
<li  class="current">
    <span></span>
    <a href="###">案例</a>
</li>
    <li  class="current">
        <span class=""></span>
        <a href="###">客户</a>
    </li>
    <li  class="current">
        <span class=""></span>
        <a href="###">服务</a>
    </li>
    <li  class="current">
        <span class=""></span>
        <a href="###">支持</a>
    </li>
</ul>
</div>
发新话题