<header class="site-head">

        <div class="topbar">

            <div class="center-wrap">

                <nav class="shortcur-links">

                    <ul>

                        <li>

                            <a href="">目的地</a>

                        </li>

                        <li>

                            <a href="">锦囊</a>

                        </li>

                        <li class="have-menu">

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

                            <em class="arrow">

                                <b></b>

                                <i></i>

                            </em>

                        </li>

                        <li>

                            <a href="">行程助手</a>

                        </li>

                        <li class="have-menu">

                            <a href="">商城</a>

                        </li>

                        <li class="have-menu">

                            <a href="">酒店.民宿</a>

                        </li>

                        <li>

                            <a href="">特价酒店</a>

                        </li>

                    </ul>

                </nav>

            </div>

        </div>

    </header>

.site-head{

    height: 150px;

}

.site-head .topbar{

    height: 32px;

    background-color: #2a2a2a;

    color: white;

    line-height: 32px;

}

.site-head .topbar a{

    color: white;

}

.site-head .topbar .shortcur-links{

    float: left;

}

.site-head .topbar .shortcur-links ul{

}

.site-head .topbar .shortcur-links>ul>li{

    float: left;

    margin-right: 18px;

    font-size: 14px;

}

.site-head .topbar .shortcur-links>ul>li .have-menu{

padding-right: 12px;

position: relative;

}

.site-head .topbar .shortcur-links>ul>li .have-menu .arrow{

    position: absolute;

    right: 0;

    top: 50%;

    margin-top: -6px;

    width: 12px;

    height: 12px;

}

.site-head .topbar .shortcur-links>ul>li .have-menu .arrow b{

    position: absolute;

    width: 6px;

    top: 3px;

    left: 3px;

    height: 6px;

    background-color: rgb(95, 228, 55);

    transform: rotate(45deg);

}

.site-head .topbar .shortcur-links>ul>li .have-menu .arrow i{

    position: absolute;

    width: 6px;

    top: 1px;

    left: 3px;

    height: 6px;

    background-color: #e4d61a;

    transform: rotate(45deg);

}

.site-head .topbar .shortcur-links>ul>li .have-menu:hover .arrow{

    transform: rotate(180deg);

}