묻고답하기
default 레이아웃 메뉴바 변경 GNB 질문
2014.01.21 16:05
안녕하세요.
default 레이아웃에서 메뉴바 색상을 파란색으로, 메뉴바에 마우스 올리면 내려오는 하부메뉴 바탕색을 연한파란색으로 변경하고, 메뉴 글씨를 가운데 정렬하려고 하는데
여기서 어느 부분을 어떻게 고쳐야 하는지 좀 알려주세요 ㅜㅜ
제가 잘 몰라서 여기 질문 올립니다 ㅠㅠ
/* GNB */
.gnb{position:relative;z-index:1;border:1px solid #080808;font-size:13px;height:31px;clear:both;background-color:#080808;background:-webkit-linear-gradient(top, #2e2d32, #0c0c0e);background:-moz-linear-gradient(top, #2e2d32, #0c0c0e);background:-o-linear-gradient(top, #2e2d32, #0c0c0e);background:-ms-linear-gradient(top, #2e2d32, #0c0c0e);background:linear-gradient(top, #2e2d32, #0c0c0e);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#2e2d32, endColorStr=#0c0c0e)}
.gnb:before{content:"";display:block;background:#3e3e40;width:100%;height:1px}
.gnb ul{margin:0;padding:0;list-style:none}
.gnb a{text-decoration:none;white-space:nowrap}
.gnb>ul{position:absolute;top:32px;left:-1px;right:-1px;background:#464d5d;opacity:.98;filter:alpha(opacity=98);height:0}
.gnb.open>ul{height:auto;border-bottom:1px solid #333}
.gnb>ul:after{content:"";display:block;clear:both}
.gnb>ul>li{position:relative;top:-32px;float:left;margin:0 -1px -8px 0}
.gnb>ul>li>a{display:block;border-left:1px solid #3e3e40;border-right:1px solid #3e3e40;line-height:32px;padding:0 20px;color:#fff;position:relative}
.gnb>ul>li>a:after{content:"";position:absolute;width:1px;height:100%;right:0;top:0;background:#080808;overflow:hidden}
.gnb>ul>li.active>a,
.gnb>ul>li.hover>a{border-top:1px solid #4a505c;line-height:30px;padding-bottom:1px;background-color:#2f333b;background:-webkit-linear-gradient(top, #383c45, #0c0d0f);background:-moz-linear-gradient(top, #383c45, #0c0d0f);background:-o-linear-gradient(top, #383c45, #0c0d0f);background:-ms-linear-gradient(top, #383c45, #0c0d0f);background:linear-gradient(top, #383c45, #0c0d0f);filter:progid:DXImageTransform.Microsoft.gradient(startColorStr=#383c45, endColorStr=#0c0d0f)}
.gnb ul ul{display:block;position:relative;z-index:2;padding:0 20px;margin:0 0 0 -1px;border-left:1px solid #424856;height:0;overflow:hidden}
.gnb.open ul ul{margin-top:6px}
.gnb ul ul:before{content:"";position:absolute;left:0;top:0;width:1px;height:100%;background:#4b5265}
.gnb.open ul ul{padding:13px 20px;height:auto}
.gnb>ul>li:first-child>ul{border:0}
.gnb>ul>li:first-child>ul:before{content:normal}
.gnb ul ul a{display:block;line-height:20px;font-size:12px;color:#fff}
.gnb ul ul a:hover,
.gnb ul ul a:focus{text-decoration:underline}
댓글 2
-
멀티비타민
2014.01.21 17:50
-
KANTSOFT
2014.01.21 18:52
css 로 원하는 부분을 수정하기위해선.. '선택자' 라는부분만 공부해도 원하는 부분 수정정도는 쉽게 찾아서 하실 수 있을꺼에요.
http://www.xpressengine.com/index.php?mid=tip&page=3&document_srl=22536831
참고해서 고쳐보세요
무작정 남이 도와주기 보다는 직접 수정하면서 구조를 익히는게 훨씬 나아요