묻고답하기
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 남기남 |
홍찬 | css에서 top에 화면 창 가운데라는 값 넣기 [1] | 2016.02.20 by XESTUDIO |
캣대디 | 실시간 새글 알림 애드온 특정게시판만 알림오게하려고 합니다. [5] | 2016.04.18 by 꽃민 |
꽃민 | 관리자만 알림 뜨려면... [2] | 2016.04.19 by 꽃민 |
꽃민 | 새글 알림 도와주세요..ㅠㅠ [2] | 2016.04.19 by 꽃민 |
happy19 | 휴... 배경색 설정만 했을뿐인데, 사이트가 날라갔어요. [1] | 2016.04.22 by YJSoft |
kjmedi626 | 관리자주소를 모르겠습니다...ㅠㅠ [4] | 2016.05.27 by kjmedi626 |
흑사탕 | footer 고정 [8] | 2016.06.14 by 흑사탕 |
kara**** | 스마트폰에서 스크롤 탑버튼 고정에 관하여 질문해요. [2] | 2016.07.06 by kara**** |
마이미2 | 2차 메뉴를 가로로 나타나게 하려고 합니다. [2] | 2016.07.15 by 마이미2 |
94blossom | 검색부분을 가운데로 하고싶은데요 어떻게 하는 건가요? [1] | 2016.08.02 by 라자루스 |
해운대살고싶다 | php 질문드립니다. | |
청*솔 | iframe 으로 붙혀넣기 했는데.! [2] | 2016.09.12 by 청*솔 |
영흥도우럭1 | 실시간 새글 알림 애드온..질문드립니다. | |
샤킹 | 스크롤 버튼 고정하는 방법 알려주세요!! | |
홍찬 | 2차 메뉴 열릴시 1차 메뉴 크기확장 안되게 하려면 어떻게 해야할까요? [1] | 2017.02.03 by DoorWeb |
파도. | 스케치북 최근게시물 상단 탭 오른쪽 여백 없애기 | |
쇼퍼 | php 5.16 php 5.2 이상으로 업데이트하기 | |
lifema**** | list.html에서 letter-spacing 수정 문의드립니다 [2] | 2017.03.13 by lifema**** |
쩡님아야 | 게시판과 슬라이드와의 연결고리 | |
영종몬 | 테이블 왼쪽 여백주는방법 [3] | 2017.07.03 by 영종몬 |
css만으로 정확한 위치를 말씀드리기 힘들지만
#gnb li {display: inline-block; position: relative;} 이 부분에서 position: relative; 이건 지우셔야 할겁니다.