How the channelartlist of dedecms does not loop ul - Codes Helper

                                                                            <ul class="z-nav-conter clearfix">
            <li class="{dede:field name=typeid runphp="yes"}(@me=="")? @me="active":@me="";{/dede:field}"><a href="/"><span></span></a></li>
            
         {dede:channelartlist  typeid="top"    currentstyle="<li class="active"><a href="~typelink~" ><span>~typename~</span></a></li>"}  
         
         <li><a href="{dede:field name="typeurl"/}"><span>{dede:field name="typename"/}</span></a></li>
            
                {dede:channel type="son" noself="yes" } <ul class="z-nav-sub">
                
                <li><a href="[field:typeurl/]"><span>[field:typename/]</span></a></li>
                
                 </ul>{/dede:channel}  
           
        {/dede:channelartlist} 
        
        
        
                                                                            </ul>

this is the column and subcolumn code I called with the dedecms loop. The problem with
is that < ul class= "z-nav-sub" > follows the loop, as follows:

                                                                            <ul class="z-nav-conter clearfix">
            <li class="active"><a href="/"><span></span></a></li>
            
         <li><a href="/a1brand/"><span></span></a></li>
            
                <li><a href="/product/"><span></span></a></li>
            
                 <ul class="z-nav-sub">
                
                <li><a href="/product/meishidapei/"><span></span></a></li>
                
                 </ul> <ul class="z-nav-sub">
                
                <li><a href="/product/nut/"><span></span></a></li>
                
                 </ul> <ul class="z-nav-sub">
                
                <li><a href="/product/seaSedge/"><span></span></a></li>
                
                 </ul> <ul class="z-nav-sub">
                
                <li><a href="/product/negative/"><span></span></a></li>
                
                 </ul> <ul class="z-nav-sub">
                
                <li><a href="/product/donkeyHideGelatinCake/"><span></span></a></li>
                
                 </ul><li><a href="/foundingTeam/"><span></span></a></li>
            
                <li><a href="/a/news/"><span></span></a></li>
            
                <li><a href="/contact/"><span></span></a></li>
            
                                                                                  </ul>

the effect I want is this:

                                                                            
                                                                                                            <ul class="z-nav-conter clearfix">
            <li class="active"><a href="/"><span></span></a></li>
            <li><a href="/a1brand/"><span></span></a></li>
            <li><a href="/product/"><span></span></a></li>
                 <ul class="z-nav-sub">
                <li><a href="/product/meishidapei/"><span></span></a></li>
                <li><a href="/product/nut/"><span></span></a></li>
                <li><a href="/product/seaSedge/"><span></span></a></li>
                <li><a href="/product/negative/"><span></span></a></li>
                <li><a href="/product/donkeyHideGelatinCake/"><span></span></a></li>
                 </ul>
                 <li><a href="/foundingTeam/"><span></span></a></li>
                <li><a href="/a/news/"><span></span></a></li>
                <li><a href="/contact/"><span></span></a></li>
            
     </ul>

how to achieve it?