筋斗云抖动解决方法

html部分

 <div class="nav">
        <span class="cloud"></span>
        <ul>
            <li class="red">首页新闻</li>
            <li><a href="javascript:;">师资力量</a></li>
            <li><a href="javascript:;">活动策划</a></li>
            <li><a href="javascript:;">企业文化</a></li>
            <li><a href="javascript:;">招聘信息</a></li>
            <li><a href="javascript:;">招聘信息</a></li>
            <li><a href="javascript:;">招聘信息</a></li>
            <li><a href="javascript:;">招聘信息</a></li>
        </ul>
    </div>

css部分

        body {
            background: #ccc;
        }

        * {
            margin: 0;
            padding: 0;
        }

        div {
            position: relative;
            margin: 100px auto;
            width: 1000px;
            height: 42px;
            line-height: 42px;
            box-sizing: border-box;
            background: #fff url(images/rss.png) no-repeat right center;
            /* opacity: .9; */
            border-radius: 5px;
        }

        ul {
            position: absolute;
        }

        ul li {
            list-style: none;
            float: left;
            width: 83px;
            line-height: 42px;
            text-align: center;
            cursor: pointer;
        }

        li a {
            display: inline-block;
            height: 42px;
            text-decoration: none;
            font-size: 14px;
            color: #333;
        }


        .cloud {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 83px;
            height: 42px;
            background: url(images/cloud.gif) center;
            opacity: .8;
            /* z-index: -1; */
        }

        .red {
            color: red;
        }

        li a:hover {
            color: #fff;
        }

筋斗云移动的时候一直抖动，解决方法：

方法一： span 加 z-index: -1;  +  大盒子加opacity: .9;

方法二：给ul加定位