<section class="sy">

            <ul>

                <li class="have-menu">

                    <a href="">社区</a>

                    <span>

                        <img src="images/topicon02.png" alt="">

                    </span>

                </li>

                <li >

                    <a href="">学校</a>

                </li>

                <li class="have-menu">

                    <a href="">环境</a>

                </li>

                <li >

                    <a href="">医院</a>

                </li>

            </ul>

        </section>

css：

.sy{

    width: 800px;

    height: 500px;

    padding-top: 40px;

    background-color: thistle;

    margin: 0 auto;

}

.sy li{

    text-align: center;

    float: left;

     margin-right: 20px;

}

.sy a{

    color: #000;

    font-size: 14px;

}

.sy li.have-menu{

    position: relative;

}

.sy li.have-menu {

    padding-right: 12px;

}

.sy li.have-menu span{

    position: absolute;

    width: 12px;

    height: 12px;

    right: 0;

    top: 0px;

    transition: transform .5s ease 0;

}

.sy li.have-menu span:hover{

    transform: rotate(180deg);

}

​