<header class="site-head">

        <div class="topbar">

            <div class="center-wrap">

                <nav class="shortcut-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>

                            <em class="arrow">

                                <b></b>

                                <i></i>

                            </em>

                        </li>

                        <li class="have-menu">

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

                            <em class="arrow">

                                <b></b>

                                <i></i>

                            </em>

                        </li>

                        <li>

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

                        </li>

                    </ul>

                </nav>

            </div>

            <div class="main-nav">

                <nav class="center-wrap">

                    <ul>

                        <li class="have-menu">

                            <a href="">机酒自由行</a>

                        </li>

                        <li>

                            <a href="">优惠机票</a>

                        </li>

                        <li class="have-menu">

                            <a href="">跟团游</a>

                        </li>

                        <li>

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

                        </li>

                        <li class="have-menu">

                            <a href="">当地玩乐</a>

                        </li>

                        <li>

                            <a href="">签证</a>

                        </li>

                        <li>

                            <a href="">游轮</a>

                        </li>

                        <li>

                            <a href="">河轮</a>

                        </li>

                        <li>

                            <a href="">保险</a>

                        </li>

                        <li>

                            <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;

    line-height:32px;

}

.site-head .topbar a{

    color:#FFF;

    

}

.site-head .topbar .shortcut-links {

    float:left;

}

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

    float: left;

    margin-right: 18px;

    font-size:12px

} 

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

    padding-right: 12px;

    position:relative;

}

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

    position: absolute;

    right:0;

    top:50%;

    margin-top:-6px;

    width: 12px;

    height: 12px;

   

   transition: transform .2s ease 0s;

    

}

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

    transform: rotate(180deg);

}

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

    position: absolute;

    top:1.5px;

    left:3px;

    width: 6px;

    height: 6px;

    background-color: #FFF;

    transform:rotate(45deg);

}

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

    position: absolute;

    top:.5px;

    left:3px;

    width: 6px;

    height: 6px;

    background-color: #2A2A2A;

    transform:rotate(45deg);

}

.main-nav{

    width: 100%;

    height:40px;

    background-color: #20BD9A ;

   

}

.site-head .topbar .main-nav .center-wrap>ul>li{

    float: left;

    margin-right:18px;

   

}

.main-nav ul li a{

    font-size: 16px;

    line-height:40px;

    color:#FFF;

}

.main-nav ul li .have-menu{

    padding-right: 12px;

    position: relative;

}

.main-nav ui li .have-menu::before{

    content:"";

    position: absolute;

    right:0;

    top:18px;

    width: 0px;

    height: 0px;

    border:6px solid red;

    background-color: aqua;

}

​