3차메뉴가

카테고리(분류)처럼 게시판 상단에 버튼형식으로 나왔으면 좋겠습니다

아래는 스케치북 게시판의 카테고리 출력부분입니다

혹시몰라서 CSS 부분도 같이 올려봅니다

----------------------------------------------------------------------

<!--// 카테고리 -->
<div cond="$mi->use_category=='Y' && $mi->cnb!='N'" class="if_lst_btn"|cond="$mi->select_lst=='N'" style="margin-bottom:-20px"|cond="$mi->default_style=='blog'">
{@ $cate_list = array(); $current_key = null; }
<!--@foreach($category_list as $key=>$val)-->
    <!--@if(!$val->depth)-->
        {@
            $cate_list[$key] = $val;
            $cate_list[$key]->children = array();
            $current_key = $key;
        }
    <!--@elseif($current_key)-->
        {@ $cate_list[$current_key]->children[] = $val }
    <!--@end-->
<!--@end-->
    <div cond="!$mi->cnb" class="bd_cnb clear css3pie<!--@if($mi->cnb_open)--> open<!--@end-->">
        <a class="home" href="{getUrl('category','','page','','document_srl','')}" title="{$lang->document_count} '{number_format($total_count)}'"><i class="home ico_16px">Category</i></a>
        <div class="dummy_ie fr"></div>
        <ul class="bubble bg_f_f9 css3pie">
            <li class="cnbMore"><a href="#" class="bubble" title="{$lang->category} {$lang->more}"><i class="fa<!--@if($mi->cnb_open)--> fa-caret-up<!--@else--> fa-caret-down<!--@end-->"></i></a></li>
            <li loop="$cate_list=>$key,$val" class="on"|cond="$category==$val->category_srl">
                <a class="a1<!--@if($category==$val->category_srl)--> on<!--@end-->" href="{getUrl(category,$val->category_srl,'document_srl','','page','')}" title="{$lang->document_count} {$val->document_count}"|cond="!$mi->cnb_count" style="color:{$val->color}"|cond="$val->color!='transparent'">{$val->title}<small cond="$mi->cnb_count">({$val->document_count})</small></a>
                <ul cond="count($val->children)" class="wrp">
                    <li loop="$val->children=>$idx,$item" class="li2<!--@if($category==$item->category_srl)--> on<!--@end-->"><a href="{getUrl(category,$item->category_srl,'document_srl','','page','')}" title="{$lang->document_count} {$item->document_count}"|cond="!$mi->cnb_count" style="color:{$item->color}"|cond="$item->color!='transparent'">{$item->title}<small cond="$mi->cnb_count">({$item->document_count})</small></a></li>
                </ul>
            </li>
        </ul>
    </div>
    <ul cond="$mi->cnb=='cTab'" class="cTab clear">
        <li class="home<!--@if(!$category)--> on<!--@end-->"><a href="{getUrl('category','','page','','document_srl','')}" title="{$lang->document_count} {number_format($total_count)}">{$lang->total}<small cond="$mi->cnb_count">({number_format($total_count)})</small></a></li>
        <li loop="$cate_list=>$key,$val" class="on"|cond="$category==$val->category_srl">
            <a href="{getUrl(category,$val->category_srl,'document_srl','','page','')}" style="color:{$val->color}"|cond="$val->color!='transparent'">{$val->title}<small cond="$mi->cnb_count">({$val->document_count})</small></a>
            <ul cond="count($val->children)">
                <li loop="$val->children=>$idx,$item" class="on"|cond="$category==$item->category_srl"><a href="{getUrl(category,$item->category_srl,'document_srl','','page','')}" style="color:{$item->color}"|cond="$item->color!='transparent'">{$item->title}</a></li>
            </ul>
        </li>
    </ul>
<ul cond="$mi->cnb=='cnb3' || $mi->cnb=='cnb4'" class="cnb3 {$mi->cnb} {$mi->cnb3_align} clear">
        <li class="home<!--@if(!$category)--> on<!--@end-->">
            <a href="{getUrl('category','','page','','document_srl','')}" title="{$lang->document_count} {number_format($total_count)}">{$lang->total}<small cond="$mi->cnb_count">({number_format($total_count)})</small></a></li><li loop="$cate_list=>$key,$val" class="on"|cond="$category==$val->category_srl"><a href="{getUrl(category,$val->category_srl,'document_srl','','page','')}" style="color:{$val->color}"|cond="$val->color!='transparent'">{$val->title}<small cond="$mi->cnb_count">({$val->document_count})</small></a>
        </li>
    </ul>
</div>  

-------------------------------------------------------------------------------------------------------

아래는 CSS입니다

/* Box Style */
.cnb3{margin:0 0 0 -2px;padding:0}
.cnb3 li{list-style:none;float:left}
.cnb3 a{display:block;overflow:hidden;padding:5px 16px;margin:2px;border:1px solid #DDD;border-radius:3px;background:#EEE;white-space:nowrap;text-overflow:ellipsis;text-decoration:none !important;text-align:center;color:#333;font-size:15px;font-weight:bold;}
.cnb3 .on>a,.cnb3 a:hover,.cnb3 a:focus{border-color:#999;background:#BBB;color:#FFF;}
.cnb3 .on>a{font-weight:700}
.cnb4 a{border:1px solid #999;background:none !important}
.cnb4 .on>a,.cnb4 a:hover,.cnb4 a:focus{border-color:#333;color:#333;text-shadow:none}
.cnb3.center{text-align:center}
.cnb3.center li{float:none;display:inline-block;*display:inline;*zoom:1}