묻고답하기

1.png

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

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

 

레이아웃 에서는 

<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;

 

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

 

태그 연관 글
  1. [2021/07/20] 묻고답하기 사이트맵에서 클릭시 새창열기로 가능한가요? by Alexander *2
  2. [2020/12/16] 묻고답하기 footer 하단에 고정하려면 어딜 수정해야 할까요? by 가입명
  3. [2020/01/31] 묻고답하기 2단메뉴 by ppumweb *2
  4. [2019/10/10] 묻고답하기 cafe24 XE3 STEP 3 단계에서 에러가 발생합니다. by nothing *3
  5. [2019/05/14] 묻고답하기 배경색을 이미지로 바꾸고 싶어요 by 내일은희망 *2
글쓴이 제목 최종 글
XE 공지 글 쓰기,삭제 운영방식 변경 공지 [16] 2019.03.05 by 남기남
가입명 footer 하단에 고정하려면 어딜 수정해야 할까요?  
나눔고딕a bootstrap dorpdown 검색창  
내일은희망 배경색을 이미지로 바꾸고 싶어요 [2] 2019.05.15 by 내일은희망
Spooky 모바일에서만 '권한이 없습니다'가 나오는 이유가 궁금합니다. [1] 2019.03.29 by Spooky
tosky**** 레이아웃 수정 메뉴바 하단 간격 수정 ㅠㅠ file  
예스24 레이아웃 수정 좀 봐주세요 [2] file 2017.08.24 by 예스24
lifema**** list.html에서 letter-spacing 수정 문의드립니다 [2] 2017.03.13 by lifema****
김선달 간단한 css 좀 부탁드립니다. file  
94blossom 검색부분을 가운데로 하고싶은데요 어떻게 하는 건가요? [1] file 2016.08.02 by 라자루스
세상의모든계산기 ckeditor style.js 에 div 관련 border-radius 를 적용하면 문제가 생깁니다. [4] file 2016.01.29 by 세상의모든계산기
thdwjdtjr 메뉴바를 길게하고자 합니다 [1] file 2015.11.25 by DoorWeb
오뎅궁물 코어 1.8.3에서 변경된 CSS가 있나요? [5] 2015.11.18 by 오뎅궁물
밥탱이 실시간 새글 알림 애드온 사용하고 있는데 소리 넣으려면 어떻게 해야 하나요??  
Ystory 서브메뉴 세로에서 가로로 이동 하는 방법. file  
bb 드롭다운 메뉴바 길이...ㅠㅠㅠ [2] 2015.08.17 by DoorWeb
더블엠씨 스케치북 게시판(웹진형 카드디자인)의 목록의 글자를 키우고 싶습니다. 5시간째 방황중입니다 .ㅜㅜ [9] file 2015.07.31 by 더블엠씨
naomiblack 박스모듈에 이미지삽입 file  
루트엘 ul li을 inline 상태로 둔 상황에서 submit input 위치 질문 [2] file 2015.05.19 by 루트엘
flowerrain 자바스크립트 메뉴(dtree.js) 문의드립니다. file