XDT style B 레이아웃이구요. 

레이아웃에 아래 빨간 부분을 add 했습니다. 맞는지 모르겠지만 위의 구문 그대로 따라서 쓰고 숫자만 바꿨습니다. 

<div class="menu">

<div id="gnb_menu">

<ul class="gnb_ul">

<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 class="sub" 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>

<ul class="sub" cond="$val2['list']">

<li loop="$val2['list']=>$key3,$val3" class="active"|cond="$val3['selected']">

<a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$val3['link']}</a>

</li></ul>

</li>

</ul>

</li>

</ul>

</div>

</div>

아래는 CSS 파일인데 어떻게 고쳐야 할지 몰라서 도움 청합니다. 2차 메뉴랑 뜨는 위치가 다르니까 3차 메뉴용 css 구문을 하나 넣어줘야 할 것 같은데 어떻게 넣어야 하나요? 

/*menu*/

.header .menu .logo { width:200px; height:71px; float:left; margin-left:20px;}

.header .menu #gnb_menu { height:50px; float:left; }

.header .menu #gnb_menu ul { list-style:none; padding:0; margin:0; }

.header .menu #gnb_menu .gnb_ul>li { position:relative; float:left; white-space:nowrap; }

.header .menu #gnb_menu .gnb_ul>li>a { font-size:15px; font-weight:; color:#ffffff; display:block; height: 45px; line-height: 45px; padding:0 21px; }

.header .menu #gnb_menu .sub { display:none; position:absolute; top:45px; min-width:84px; background:url('./../img/blackglass.png'); padding:10px; z-index:20; }

.header .menu #gnb_menu .sub>li { height:20px; line-height:20px; padding-left: 15px; }

.header .menu #gnb_menu .sub>li>a { color:#fff; }