代码有瑕疵

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

                            <div class="menu sqmenu">

                                <ul class="menu-list">

                                    <li><a href="">旅行论坛</a></li>

                                    <li><a href="">旅行专栏</a></li>

                                    <li><a href="">旅行问答</a></li>

                                    <li><a href="">旅行生活分享平台</a></li>

                                    <li><a href="">jme旅行生活美学</a></li>

                                    <li><a href="">biu拌(原结伴同游)</a></li>

                                    <li><a href="">负责任的旅行</a></li>

                                    <li><a href="">特别策划</a></li>

                                </ul>

                            </div>

                        </li>

                        <li>

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

                        </li>

                        <li class="have-menu">

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

                            <em class="arrow">

                                <b></b>

                                <i></i>

                            </em>

                            <div class="menu scmenu">

                                <ul class="menu jjzyxmenu">

                                    <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><a href="">游轮</a></li>

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

                                    <li><a href="">私人定制</a></li>

                                    <li><a href="">欧洲铁路</a></li>

                                </ul>

                            </div>

                        </li>

                        <li class="have-menu">

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

                            <em class="arrow">

                                <b></b>

                                <i></i>

                            </em>

                            <div class="menu jdmsmenu">

                                <ul class="menu gtymenu">

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

                                    <li><a href="">爱彼迎</a></li>

                                    <li><a href="">华人旅馆</a></li>

                                    >

                                </ul>

                            </div>

                        </li>

                        <li>

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

                        </li>

                    </ul>

                </nav>

                <div class="topbar-r">

                    <a href="">

                        <span class="iconfont">&#xe617</span>

                    </a>

                    <span>|</span><a href="">

                        <span class="iconfont">&#xe64c;</span>

                    </a>

                    <a href="">

                        <span class="iconfont">&#xe7ba;</span>

                    </a>

                    <a href="">登录</a>

                    <a href="">注册</a>

                </div>

            </div>

        </div>

        <nav class="main-nav">

            <div class="center-wrap">

                <ul>

                    <li class="have-menu">

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

                        <div class="menu jjzyxmenu">

                            <dl>

                                <dt>全部</dt>

                                <dd>

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

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

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

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

                                    <a href="">定制游</a>

                                    <a href="">马尔代付</a>

                                    <a href="">海岛游</a>

                                </dd>

                            </dl>

                        </div>

                    </li>

                    <li>

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

                    </li>

                    <li class="have-menu">

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

                        <div class="menu jdmsmenu">

                            <dl>

                                <dt>全部</dt>

                                <dd>

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

                                    <a href="">半自助游</a>

                                </dd>

                            </dl>

                        </div>

                    </li>

                    <li>

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

                    </li>

                    <li class="have-menu">

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

                        <div class="menu jdmsmenu">

                            <dl>

                                <dt>全部</dt>

                                <dd>

                                    <a href="">日游小团</a>

                                    <a href="">深度体验</a>

                                    <a href="">门票票卷</a>

                                    <a href="">餐饮美食</a>

                                    <a href="">wfi电话卡</a>

                                    <a href="">购物</a>

                                    <a href="">交通卡</a>

                                </dd>

                            </dl>

                        </div>

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

                        <div class="menu">

                            <dl>

                                <dt>全部</dt>

                                <dd>

                                    <a href="">citywalk</a>

                                    <a href="">特色长线</a>

                                    <a href="">q-home</a>

                                </dd>

                            </dl>

                        </div>

                    </li>

                    <li>

                        <a href="">私人定制</a>

                    </li>

                </ul>

            </div>

        </nav>

        <div class="header-con">

            <div class="center-wrap">

                <h1>暮云游商城</h1>

                <div class="soso-box">

                    <Input type="text" placeholder="请输入目的地"></Input>

                    <a href="" class="btn iconfont">&#xe617</a>

                </div>

            </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 .topbar-r{

    float: right;

    width: 225px;

}

.site-head .topbar .topbar-r a,.site-head .topbar .topbar-r span{

    margin-right: 13px;

    font-size: 14px;

}

.site-head .topbar .topbar-r a:last-child{

    margin-right: 0;

}

.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: #fff;

    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: #2a2a2a;

    transform: rotate(45deg);

}

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

    transform: rotate(180deg);

}

.site-head .main-nav{

    height: 40px;

    background-color: #20bd9a;

}

.site-head .main-nav ul li{

    float: left;

    margin-right: 18px;

}

.site-head .main-nav ul li.have-menu{

    padding-right: 16px;

    position: relative;

}

.site-head .main-nav ul li  a{

    line-height: 40px;

    color: white;

    font-size: 16px;

}

.site-head .main-nav ul li.have-menu::before{

    content: '';

    position: absolute;

    width: 0px;

    right: 0;

    top: 18px ;

    margin-top: -8px;

    height: 0px;

    border: 5px solid transparent;

    border-bottom: none;

    border-top-color:rgb(244, 244, 250) ;

    transition: transform .5s ease 0s;

}

.site-head .main-nav ul li.have-menu:hover::before{

    transform: rotate(18deg);

}

.site-head .header-con{

    height: 36px;

    padding: 21px 0;

}

.site-head .header-con h1{

    float: left;

    font-size: 24px;

    color: #20bd9a;

    font-weight: bold;

    line-height: 36px;

}

.site-head .header-con .soso-box{

    float: left;

    margin-left: 20px;

    width: 405px;

    padding-top: 2px;

}

.site-head .header-con .soso-box input{

    width: 361px;

    height: 28px;

    border-radius: 4px 0 0 4px ;

    border:  1px solid #20bd9a;

    font-size: 14px;

   outline: none;

   padding-left: 10px;

   float: left;

}

.site-head .header-con .soso-box .btn{

    /* display: inline-block; */

    width: 32px;

    height: 30px;

    background-color: #20bd9a;

    float: left;

    color: white;

    text-align: center;

    line-height: 30px;

    font-size: 18px;

    border-radius: 0 4px 4px 0;

}

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

 position: absolute;

 top: 30px;

 left: 0px;

 z-index: 9999;

 display: none;

 padding-top: 10px;

 background-color: white;

 box-shadow: 0 4px 8px 0 rgba(126, 126, 126, 0.2);

 padding: 10px;

 display: none;

}

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

width: 110px;

}

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

    display: block

}

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

    font-size: 14px;

    color: #1c1f21;

    line-height: 20px;

}

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

    height: 20px;

    line-height: 20px;

}

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

    color: orange;

}

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

        width: 80px;

        }

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

            width: 110px;

            }

.site-head .main-nav .menu{

                position: absolute;

                top: 35px;

                left: 0;

                background-color: white;

            }

.site-head .main-nav ul li .menu dl dd a {

    color: #1c1f21;

}

.site-head .main-nav ul li .gtymenu{

    width: 99px;

}

.site-head .main-nav ul li .jjzymenu{

    width: 150px;

}

.site-head .main-nav ul li .ddwlmenu{

    width: 190px;

}

.site-head .main-nav ul li .sdlymenu{

    width: 160px;

}

.site-head .main-nav ul li:hover.menu{

    display: block;

}