2단메뉴를 적용하고싶은데 1단까지 밖에  표현이 안됩니다.

아래 소스가 1단메뉴까지만 나오는 소스인데 2단까지 나올수있도록 수정하고싶습니다.

어떻게 수정하면될까요?

<div class="sub_gnb">
            <div class="sub_gnb_wrap">
                <ul class="submenu">
                    <li loop="$main_menu->list=>$key1,$val1" class="active"|cond="$val1['selected']">
                        <a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'">{$val1['link']}</a>
                        <ul cond="$val1['list']">
                            <li loop="$val1['list']=>$key2,$val2" class="active"|cond="$val2['selected']">
                                <a href="{$val2['href']}" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

스타일

.header_area > .sub_gnb {
    margin: 0 auto;
    overflow: hidden;
    width: 990px;
    font-size: 12px;
    font-weight:500;
    background: #fff;
    border: 1px solid #d5d5d5;
}

.header_area > .sub_gnb > .sub_gnb_wrap {
    width: 990px;
    margin: 0 auto;
}

.header_area > .sub_gnb > .sub_gnb_wrap > ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
}


.header_area > .sub_gnb > .sub_gnb_wrap > ul > li {
    list-style: none;
    float: left;
    padding: 15px 20px;
    border-right: 1px solid #D1D1D1;
}
.header_area > .sub_gnb > .sub_gnb_wrap > ul > li:hover {
    background: #F2F2F2;
    color: #8c8c8c;
}

.header_area > .sub_gnb > .sub_gnb_wrap > ul > li > a {
    text-decoration: none;
    color: #8c8c8c;
    width: 100%;
}



.header_area > .sub_gnb > .sub_gnb_wrap > ul > li > ul {
    display: none;
    position: absolute;
    background: #fff;
    z-index: 99999;
    margin: 15px 0 0 -20px;
    padding: 0;
    list-style: none;
    width: 150px;
    color:#8c8c8c;
    border: 1px solid #D1D1D1;
}

.header_area > .sub_gnb > .sub_gnb_wrap > ul > li:hover > ul {
    display: block;
}

.header_area > .sub_gnb > .sub_gnb_wrap > ul > li > ul > li {
    padding: 10px 10px;
    color:#8c8c8c;
}

.header_area > .sub_gnb > .sub_gnb_wrap > ul > li > ul > li:hover {
    background: #f2f2f2;
}

.header_area > .sub_gnb > .sub_gnb_wrap > ul > li > ul > li a {
    color: #8c8c8c;
    text-decoration: none;
}