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

                        <li class="havve-menu"></li>

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

                        <em class="arrow">

                            <b></b>

                            <i></i>

                        </em>

                        </li>

                        <li>

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

                        </li>

                        <li>

                        <li class="havve-menu"></li>

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

                        <em class="arrow">

                            <b></b>

                            <i></i>

                        </em>

                        </li>

                        <li>

                        <li class="havve-menu"></li>

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

                        <em class="arrow">

                            <b></b>

                            <i></i>

                        </em>

                        </li>

                        <li>

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

                        </li>

                    </ul>

                </nav>

            </div>

        </div>

    </header>

   css.css部分

.site-head{

height: 150px;

}

.site-head .topbar{

height: 32px;

background-color: #2A2A2A;

line-height: 32px;

}

.site-head .topbar a{

    color: white;

}

.site-head .topbar .shortcut-links{

    float: left;

}

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

}

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

    float: left;

    margin-right: 18px;

    font-size: 14px;

}

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

padding-right: 12px;

position: relative;

}

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

    position: absolute;

    right: 0;

    top: 50%;

    margin-top: -6px;

    width: 12px;

    height: 12px;

}

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

    position: absolute;

    top: 0px;

    left: 2px;

    width: 6px;

    height: 6px;

    background-color: #fff;

    transform: rotate(45deg);

}

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

    position: absolute;

    top: -2px;

    left: 2px;

    width: 6px;

    height: 6px;

    background-color:#2A2A2A;

}