우선 그림이 엉성한점에 죄송합니다 ㅠ_ㅠ 

그림과 같이 위에서 아래로 가는 메뉴를 좌에서 우로 가는 메뉴를 만들고싶습니다. 

레이아웃 에서는 

<nav class="xet_nav_wrp float_right xet_clearfix">
        <div class="xet_acc float_right">                
            <a href="#" id="xet_nav_o" class="hidden_pc visible_tablet" onclick="javascript:return false;">
                <span class="icon_menu"><i class="xe-align-justify"></i></span>
                <span class="icon_close"><i class="xe-ban"></i></span>
            </a>            
            <a href="#" id="acc_o" onclick="javascript:return false;" cond="$li->login!='N'">                
                <span class="icon_menu"><i class="xe-user-circle"></i></span>
                <span class="icon_close"><i class="xe-ban"></i></span>
            </a>
            <a href="#" id="search_o" onclick="javascript:return false;" cond="$li->search!='N'">
                <span class="icon_menu"><i class="xe-magnifier"></i></span>
                <span class="icon_close"><i class="xe-ban"></i></span>
            </a>                        
        </div>        
        <ul id="xet_nav" class="xet_nav float_right hidden_tablet">
            <li loop="$main_menu->list=>$key1,$val1" cond="$val1['link']">                    
                <a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'" class="on"|cond="$val1['selected']"><span style="color:#e46c0a">{$val1['link']}</span></a>                
                <ul class="child1" cond="$val1['list']">
                    <span class="edge" style="color:#e46c0a"></span>
                    <li loop="$val1['list']=>$key2,$val2" cond="$val2['link']">                            
                        <a href="{$val2['href']}" class="child"|cond="$val2['list']" target="_blank"|cond="$val2['open_window']=='Y'">{$val2['link']}</a>                            
                        <ul class="child2" cond="$val2['list']">
                            <li loop="$val2['list']=>$key3,$val3" cond="$val3['link']">
                                <a href="{$val3['href']}" target="_blank"|cond="$val3['open_window']=='Y'">{$val3['link']}</a>
                            </li>
                        </ul>
                    </li>
                </ul>                    
            </li>    
        </ul>
                    
    </nav>    

이고 , 

css에서는 

#xet_header {
    width: 100%;
    height: 90px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    transform: translate3d(0px, 0px, 0px);
    transition: background-color 0.3s ease 0s;
}
#xet_header.header_up {
    top: -100px;
    transition: transform 0.3s ease 0s;
}
#xet_header.header_down {
    background: #3F51B5;    
}
.xet_logo {
    margin-left: 30px; 
}
.xet_logo a {
    height: 90px;
    line-height: 90px;
    overflow: hidden;
    display: inline-block;    
    font-size: 28px;
    font-weight: 600;
    color: #fff;
}
.xet_logo a img { 
    max-width: 100%;
    vertical-align: middle; 
}

/* NAV
-------------------------------------- */  
.xet_nav_wrp { 
    position:relative;
    margin-right: 30px; 
    background: rgba(0,0,0,0); /* ie9,10 bug fix */
}
@media \0screen { 
    .xet_nav_wrp { 
        background: url(../img/trans-0.png) repeat;/* ie8 bug fix */
    }
}
ul.xet_nav { 
    margin: 0 20px 0 0;
    padding: 0;
    list-style: none;
    *zoom:1;     
}
ul.xet_nav:after { 
    content:""; display:block; clear:both; 
}
ul.xet_nav > li { 
    position:relative; 
    float: left;
    margin:0;
    padding: 0; 
    height: 90px; 
    line-height: 90px;    
}
ul.xet_nav > li:after { 
    content: "  /";
    color: #fff;
}
ul.xet_nav > li:last-child:after { 
    content: " ";
}
ul.xet_nav > li > a { 
    display: inline-block;
    font-size: 14px; 
    text-decoration:none;
    cursor:pointer;
    margin: 0 15px;
    padding: 0; 
    color:#fff;
}
ul.xet_nav > li > a > span { 
    padding: 0px;
    line-height: 1.5;
}
ul.xet_nav > li.xet_acc a { 
    display: inline-block;
    font-size: 22px; 
    cursor:pointer;
    margin: 0 5px;
}
ul.xet_nav li img { 
    vertical-align:middle; 
}
ul.xet_nav li:hover > a > span,
ul.xet_nav li a.on > span {
    padding-bottom: 3px;
    border-bottom: 1px solid #eee;
}

/* child1 */
ul.xet_nav ul { 
    z-index: 99; 
    display: none;
    position: absolute; 
    left: 50%; 
    top: 100%;    
    width: 180px;
    list-style: none;
    margin: 0 0 0 -90px; 
    padding: 0;
}
ul.xet_nav ul li { 
    position: relative;
    float: none; 
    margin: 0;
    padding: 6px 0;
    height: auto;
    line-height: 150%;
    background: #f9f9f9;
    border-bottom: 1px solid rgba(0,0,0,.1);
}
ul.xet_nav ul li a { 
    display: block; 
    font-size: 13px; 
    font-weight: normal; 
    margin: 0; 
    padding: 0 20px;
    color: #333; 
}
ul.xet_nav ul li a.child { 
    background:url(../img/right_arrow.png) 90% 50% no-repeat;
}

/* 3차 메뉴 */
ul.xet_nav ul.child2 { 
    top: 0; 
    left:100%; 
    margin: 0;

입니다. 어느 부분을 수정해야할지 하루종일 와따가따 했다가... 고민끝에 질문합니다.