一级菜单 二级菜单的收缩

html

    <div class="menu">
        <div class="ma1440">
            <div class="shouye">
                <ul class="" id="main_nav">
                    <li class=" atc ">
                        <a href="/go.htm?k=shou_ye&url=index">首页</a>
                        <ul class="subnav">
                        </ul>
                    </li>
                    <li class="  ">
                        <a href="/go.htm?k=yi_yuan_gai_kuang&url=yygk">公司概况</a>
                        <ul class="subnav">
                            <li>
                                <a href="/go.htm?k=yi_yuan_jian_jie&url=yygk_yyjj">医院简介</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=ling_dao_tuan_dui&url=yyld">领导团队</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=li_jie_ling_dao&url=yyld">历届领导</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=yi_yuan_wen_hua&url=yywh">医院文化</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=yi_yuan_rong_yu&url=yyry">医院荣誉</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=yi_yuan_lu:e_ying&url=yyry">医院掠影</a>
                            </li>
                        </ul>
                    </li>
                    <li class="  ">
                        <a href="/go.htm?k=xin_wen_zhong_xin&url=news">新闻中心</a>
                        <ul class="subnav">
                            <li>
                                <a href="/go.htm?k=yi_yuan_xin_wen&url=news_list2">医院新闻</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=zhao_biao_gong_gao&url=news_list">招标公告</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=mei_ti_ju_jiao&url=news_list2">媒体聚焦</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=yuan_wu_gong_kai&url=news_list2">院务公开</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=shi_pin_xin_wen&url=news_list3">视频新闻</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=ren_cai_zhao_pin&url=news_list">人才招聘</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=xue_shu_dong_tai&url=news_list2">学术动态</a>
                            </li>
                        </ul>
                    </li>
                    <li class="  ">
                        <a href="/go.htm?k=dang_qun_gong_zuo&url=dqgz">生产经营</a>
                        <ul class="subnav">
                            <li>
                                <a href="/go.htm?k=dang_qun_zi_xun&url=news_list2">党群资讯</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=ji_ceng_dang_jian&url=news_list2">基层党建</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=tuan_wei_gong_zuo&url=news_list2">团委工作</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=dang_feng_lian_zheng&url=news_list2">党风廉政</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=zhi_bu_dong_tai&url=news_list2">支部动态</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=xue_xi_zi_liao&url=news_list2">学习资料</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=zhuan_ti_bao_dao&url=news_list2">专题报道</a>
                            </li>
                        </ul>
                    </li>
                    <li class="  ">
                        <a href="/go.htm?k=ke_shi_dao_hang&url=ksdh">党群建设</a>
                        <ul class="subnav">
                        </ul>
                    </li>
                    <li class="  ">
                        <a href="/go.htm?k=zhuan_jia_jie_shao&url=zjjs">企业文化</a>
                        <ul class="subnav">
                        </ul>
                    </li>
                    <li class="  ">
                        <a href="/go.htm?k=jiu_yi_xu_zhi&url=jyxz">联系我们</a>
                        <ul class="subnav">
                            <li>
                                <a href="/go.htm?k=jiu_yi_xu_zhi&url=jyxz">就医须知</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=men_zhen_shi_jian&url=mzsj">门诊时间</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=zhu_yuan_zhi_nan&url=zyzn">住院指南</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=yi_liao_bao_xian&url=zyzn">医疗保险</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=huan_zhe_jiao_liu&url=hzjl">患者交流</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=yu_yue_gua_hao&url=yygh">预约挂号</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=dang_tian_gua_hao&url=yygh">当天挂号</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=fei_yong_zi_xun&url=fyzx">费用查询</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=bao_gao_cha_xun&url=bgcx">报告查询</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=jian_kang_ti_jian&url=xz_jktj">健康体检</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=jiao_tong_zhi_nan&url=jtzn">交通指南</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=te_se_yi_liao&url=tsyl">特色医疗</a>
                            </li>
                            <li>
                                <a href="/go.htm?k=liu_yan_fan_kui&url=lyfk">留言反馈</a>
                            </li>
                        </ul>
                    </li>
                </ul>

            </div>

        </div>
    </div>

css

.ma1440 {
    width: 1440px;
    margin: 0 auto;
}

.atc {
    background: #B30304;
}
.subnav a {
    font-size: 16px !important;
}
.menu {
    width: 100%;
    height:62px;
    line-height: 62px;
    background: #C72222;
}
.shouye li a {
    text-decoration: none;
    /* float: left; */
    color: #fff;
    font-size: 18px;
    width: 11%;
    text-align: center;
}
#main_nav>li {
    float: left;
    position: relative;
    text-decoration: none;
    text-align: center;
    color: #fff;
    font-size: 18px;
    width: 14%;
}
#main_nav>li .subnav {
    z-index: 22222;
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 62px;
    left: -0;
    text-align: center;
    height: 0%;
    transition: all 1.5s;
}
#main_nav>li .subnav li {
    background: #C72222;
    height: 36px;
    line-height: 36px;
    z-index: 222;
}
#main_nav>li .subnav li:hover {
    background: #B30304 !important;
    color: #fff !important;
}
#main_nav>li:hover .subnav {
    display: block;
    height: 480px;
}