묻고답하기
2차 메뉴를 가로로 나타나게 하려고 합니다.
2016.07.15 14:19
현재 메인메뉴에 마우스 오버시 나타나는 2차메뉴가 세로로 나타나는데 이것을 메인메뉴 하단으로 가로로 나타나게 하려고 하는데 쉽진 않네요.
display: inline-block; 혹은 float: left; 를 넣어야 한다는 것을 검색으로 어느정도 알아냈는데
맞다고 생각되는 부분에 넣어도 반영이 잘 안됩니다.
하단에 소스중 어느부분에 반영해야 할지 알려주시면 정말 감사하겠습니다.
/* nav */
#gnb {text-align: center; font-size: 0;}
#gnb.fixed {position: fixed; top: 0; width: 100%; z-index: 190; -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;}
#gnb a {display: block; font-size: 12px;}
#gnb button {display: block;}
#gnb li {display: inline-block; position: relative;}
#gnb.narrow_space li,
#gnb.narrow_space>ul>li>ul,
.gnb_dummy.narrow_space>ul>li a {width: 100px;}
#gnb li.bt_img {position: relative; width: 50px; height: 33px;}
#gnb li.bt_img a,
#gnb li.bt_img button {padding: 0; height: 33px; width: 50px; text-indent: -9999px;}
#gnb li.bt_img a.bt_home {background: url(../images/icn_home.png) no-repeat center center;}
#gnb.no_line>ul>li {border-left: none; margin-left: 1px;}
#gnb.no_line>ul>li:last-child {border-right: none; margin-right: 1px;}
.bt_show_gnb {position: relative; z-index: 20; cursor: pointer;}
.bt_show_gnb span {display: block; position: absolute; left: 13px; width: 23px; height: 3px; background-color: #FFF; opacity: 0.8; z-index: 10; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; transition: .3s;}
.bt_show_gnb span:nth-child(1) {top: 9px;}
.bt_show_gnb span:nth-child(2),
.bt_show_gnb span:nth-child(3) {top: 15px;}
.bt_show_gnb span:nth-child(4) {top: 21px;}
.bt_show_gnb.open span:nth-child(1) {width: 0%; left: 50%;}
.bt_show_gnb.open span:nth-child(2) {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg)}
.bt_show_gnb.open span:nth-child(3) {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
.bt_show_gnb.open span:nth-child(4) {width: 0%; left: 50%;}
#gnb>ul>li {vertical-align: top;}
#gnb>ul>li>a {height: 35px; line-height: 35px; color: #FFF; -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.2); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.2); text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);-webkit-backface-visibility: hidden;}
#gnb>ul>li>ul {display: none; position: absolute; top: 100%; left: -1px; background-color: #FFF; border-top: none !important; text-align: left;}
#gnb>ul>li>ul>li.active>a,
#gnb>ul>li>ul>li>ul>li.active>a {font-weight: bold;}
#gnb>ul>li>ul>li a {padding: 5px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
#gnb>ul>li>ul>li>a.has_child {background-image: url(../images/icn_menu_arrow.png); background-repeat: no-repeat; background-position: right 7px center;}
#gnb>ul>li>ul li:last-child {border-bottom: none;}
#gnb>ul>li>ul>li>ul {display: none; position: absolute; left: 100%; top: -1px; background-color: #FFF;}
#gnb>ul>li>ul>li:hover>ul {display: block;}
.gnb_dummy {display: none; position: absolute; width: 100%; text-align: center; background-color: #FFF; z-index: 200;}
.gnb_dummy.fixed {position: fixed;}
.gnb_dummy>div {display: inline-block; vertical-align: top;}
.gnb_dummy>div>ul {padding: 5px 0; border-top: none !important; text-align: left;}
.gnb_dummy>div>ul>li a {display: block; padding: 5px 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-left: 1px;}
.gnb_dummy>div>ul>li a:hover {text-decoration: underline;}
.gnb_dummy>div>ul>li>ul>li>a {font-size: 11px;}
.gnb_dummy>div>ul>li.active>a,
.gnb_dummy>div>ul>li>ul>li.active>a {font-weight: bold;}
- [2020/12/16] 묻고답하기 footer 하단에 고정하려면 어딜 수정해야 할까요?
- [2020/01/31] 묻고답하기 2단메뉴 *2
- [2019/10/10] 묻고답하기 cafe24 XE3 STEP 3 단계에서 에러가 발생합니다. *3
- [2019/03/27] 묻고답하기 모바일에서만 '권한이 없습니다'가 나오는 이유가 궁금합니다. *1
- [2019/03/15] 포럼 웹 에이전시 디스케이션에서 레이아웃 템플릿 판매 개시했습니다. *2
댓글 2
글쓴이 | 제목 | 최종 글 |
---|---|---|
XE | 공지 글 쓰기,삭제 운영방식 변경 공지 [16] | 2019.03.05 by 남기남 |
BEO | 슬라이드 위젯 삽입 후 메뉴가 안보이네요 고수님들 부탁드립니다 [6] | 2022.06.17 by 인천한량 |
립샤 | 고수님들 제발 도와주세요. 창크기에 따라서 위젯 위치가 자꾸 변합니다 [1] | 2018.10.15 by 르미 |
홍찬 | 2차 메뉴 열릴시 1차 메뉴 크기확장 안되게 하려면 어떻게 해야할까요? [1] | 2017.02.03 by DoorWeb |
홍찬 | hover 했을시 다른 class 동작 하는 css [3] | 2017.02.02 by HowtoXE |
마이미2 | 2차 메뉴를 가로로 나타나게 하려고 합니다. [2] | 2016.07.15 by 마이미2 |
홍찬 | 메인 메뉴 크기 정렬 CSS 수정 방법 [1] | 2016.05.07 by DoorWeb |
초옹무 | 메인메뉴 가운데 정렬 문으 드립니다. [2] | 2015.07.13 by 초옹무 |
동그라 | 제발 도와주세요ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ [6] | 2015.04.27 by 동그라 |
스물일곱개의당근 | z-index 가 안먹히는 이유가 무엇일까요? (사진첨부) [3] | 2015.04.09 by BJ람보 |
몽그린 | 슬라이더가 아래에 깔리고 gnb가 위에 뜬 레이아웃 [1] | 2015.02.17 by DoorWeb |
오쏭 | xe 메인메뉴 2차3차 펼쳐지는 것에 관해서 질문드립니다. [3] | 2015.02.12 by 몽그린 |
css만으로 정확한 위치를 말씀드리기 힘들지만
#gnb li {display: inline-block; position: relative;} 이 부분에서 position: relative; 이건 지우셔야 할겁니다.