给导航栏目添加下拉菜单

Posted 2020-10-15

下拉样式：

/*--------------添加下拉菜单样式开始----------------------------------------------------------*/

/*.header_woo_mmm>li:nth-child(4)>.hd_nav_xl{
    
}*/

.hd_nav_xl{
    display: none;
    z-index: 9999999;
    position: absolute;
    transition: all 1s; 
    margin-left: -18px;
}

.hd_nav_xl>ul>li{
    background: #07305fc7;
    padding: 0 8px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    margin: 5px 0;
    transition: all 1s;    
    min-width: 176px;
    background: #0D4B9B;
}
.hd_nav_xl>ul>li:hover{
    background: #1277f5c7;
    text-decoration: none;
}
.hd_nav_xl>ul>li>a{
    color: #FFFFFF;
    font-size: 13px;
    line-height: 35px;
    display: inline-block;
    /*width: 85px;*/
    height: 35px;
    transition: all 1s;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    
}

.header_woo_mmm{
    
}

.header_woo_mmm>li:hover .hd_nav_xl{
    display: block;            /*让隐藏的下拉列表内容显示*/    
    
}

/*.header_woo_mmm>li>a{
    color: #FFFFFF;
    text-decoration: none;
    line-height: 47px;
    text-align: center;
    height: 47px;
    width: 90px;

}*/


/*------------添加下拉菜单样式结束-----------------------------------------------------------------*/

 

导航栏目：

  <!-- 导航start -->
        <style type="text/css">
            #nav_dj_dqy{
                background: #197ed8;
                color: #FFFFFF;
                
            }
        </style>
        <div class="header_nav_bj" style="margin-bottom: -16px;" >
            <div class="middle2">
                <div>
                    <ul class="header_woo_mmm">
                  
                            <li>
                                <a href="{APP_PATH}" >首页</a>
                                <div class="hd_nav_xl">
                                <ul>
                                        <li><a href="{$CATEGORYS[4][url]}" >产品中心</a></li>
                                        <li><a href="{$CATEGORYS[5][url]}" >工程案例</a></li>
                                        <li><a href="{$CATEGORYS[6][url]}" >资讯中心</a></li>
                                        <li><a href="{$CATEGORYS[72][url]}" >关于我们</a></li>
                                        <li><a href="{$CATEGORYS[8][url]}" >联系我们</a></li>
                                        <li><a href="{$CATEGORYS[9][url]}" >技术服务</a></li>
                                        <li><a href="{$CATEGORYS[23][url]}" >资质证书</a></li>
                                        <li><a href="{$CATEGORYS[44][url]}" >综合服务</a></li>            
                                </ul>
                            </div>
                            </li>
                            
                        <li><a href="{$CATEGORYS[72][url]}">关于我们</a>
                            <div class="hd_nav_xl">
                                <ul>
 
                                        <li><a href="{$CATEGORYS[72][url]}" >关于我们</a></li>
                                        <li><a href="{$CATEGORYS[73][url]}" >公司历程</a></li>
                                        <li><a href="{$CATEGORYS[23][url]}" >资质证书</a></li>
                                        
                                </ul>
                            </div>
                        </li>
                        
                        <li><a href="{$CATEGORYS[6][url]}">资讯中心</a>
                            <div class="hd_nav_xl">
                                <ul>
 
                                        <li><a href="{$CATEGORYS[47][url]}" >公司资讯</a></li>
                                        <li><a href="{$CATEGORYS[48][url]}" >行业资讯</a></li>
                                        

                                </ul>
                            </div>
                        </li>
                       
                        <li><a href="{$CATEGORYS[4][url]}">产品中心</a>
                            <div class="hd_nav_xl">
                                <ul>
                                    
                                    {pc:content action="category" catid="4" num="25" siteid="$siteid" order="listorder ASC"}
                                    {loop $data $r}

                                            <li>
                                                
                                                <a href="{$r[url]}">{$r[catname]}</a>
                                                
                                            </li>  
                                    {/loop}
                                    {/pc}
                                
                                    
                                </ul>
                            </div>
                        </li>
                        <li><a href="{$CATEGORYS[5][url]}" >工程案例</a></li>
                        <li><a href="{$CATEGORYS[8][url]}" >联系我们</a></li>
                        <li><a href="{$CATEGORYS[9][url]}" >技术服务</a></li>
                        <li><a href="{$CATEGORYS[44][url]}" >综合服务</a>
                            <div class="hd_nav_xl">
                                <ul>
                                        <li><a href="{$CATEGORYS[45][url]}" >系统维保服务</a></li>
                                        <li><a href="{$CATEGORYS[46][url]}" >各地区服务机构</a></li>
                                </ul>
                            </div>
                        </li>
                        
                        <div class="clear"></div>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 导航over -->