드롭다운 메뉴의 간격조정

드롭다운 메뉴의 간격조정

QA

드롭다운 메뉴의 간격조정

본문

그누의 컨텐츠 몰에서 테마를 하나 구입해서 사용하는데요.

 

사용에 어려움이 있어 질문을 남깁니다.

 

1차메뉴에 따른 2차메뉴의 위치 조정은 어디서 하는지를 알고 싶어서 입니다.

 

# 첨부파일
 

1. 화면 캡쳐

 

60814f23e9dd881feb2c6fdc761de4c6_1493389004_4795.jpg


2.css 파일
--------------------------

*#s008 Header-top*/
html #header .header-top.header-top-dark {
    background-color: transparent;
 margin-top: 0px;
}
html #header .header-top.header-top-dark .header-nav-top {
 float: right;
 margin-right: 0px;
}
html #header .header-top.header-top-dark .header-nav-top .nav.nav-pills{
 border-bottom: 0px;
}
html #header .header-top.header-top-dark .header-nav-top ul > li > a{
 padding: 0px 10px;
}
html #header .header-top.header-top-dark .header-nav-top ul > li > a:hover, html #header .header-top.header-top-dark .header-nav-top ul > li.open > a:hover, html #header .header-top.header-top-dark .header-nav-top ul > li > a:focus, html #header .header-top.header-top-dark .header-nav-top ul > li.open > a:focus {
    background: transparent;
    color: #fff;
}
html #header .header-top.header-top-dark .header-nav-top ul > li > a.master{
 color: #e3c746 !important;
}
html #header .header-top.header-top-dark .header-nav-top ul > li > a.master:hover{
 color: #fdde51 !important;
}
#header .header-top {
    position: initial; 
}
#header .header-top.header-top-style-4 {
    margin-bottom: 0px;
}
#header .header-top.header-top-style-4 .container .header-nav-top-text-wrap {
  padding: 6px 0px;
}
#header .header-nav-top .nav > li > a, #header .header-nav-top .nav > li > span {
    font-size: 12px;
 font-weight: 300;
    color: rgba(255,255,255,0.5);
}
@media only screen and (max-width:992px){
 #header .header-top.header-top-style-4 .container .header-nav-top-wrap,
 #header .header-top.header-top-style-4 .container .header-nav-top-text-wrap {
     width: 100%;
 }
 #header .header-top.header-top-style-4 .container .header-nav-top-text-wrap {
     text-align: left;
 }
}
@media only screen and (max-width:496px){
 #header .header-nav-top .nav > li > a, #header .header-nav-top .nav > li > span {
  padding: 0px 3px;
  font-size: 0.9em !important;
 }
 #header .header-top.header-top-style-4 .container .header-nav-top-text-wrap {
   padding-top: 0px;
 }
 #header .header-top .header-nav-top-text-wrap strong {
  font-size: 0.9em ;
 }
}
/*search-modal*/
.s008-modal .modal-dialog {
    width: 100%;
    margin: 0;
}
.s008-modal .modal-content{
 border-radius: 0px;
}
#header-search-modal .mobile-search-form input[type="text"]{
 vertical-align: top;
}
#header-search-modal .search-btn {
    display: inline-block;
    font-size: 16px;
    line-height: 26px;
    min-width: 26px;
    height: 35px;
    margin: 0;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    background-color: #222;
    border: none;
 vertical-align: top;
}
#header-search-modal .mobile-search-form input[type="text"]{
 padding: 4px 5px;
    border-color: transparent;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
 width: 50%;
}
@media (max-width: 992px){
 #header-search-modal .mobile-search-form input[type="text"]{
  width: 80%; 
 }
}
/*#s008 Header-top-search*/
#header .header-search{
 margin: 80px 0 8px 5px;
}
#header .header-top p {
    line-height: inherit;
}
#header .header-search .search-toggle {
 display: inline-block;
 font-size: 13px;
 line-height: 22px;
 min-width: 25px;
 margin: 0;
 text-align: center;
 background-color: transparent;
 color: #fff;
 border: none;
 cursor: pointer;
}
@media (max-width: 992px){
 #header .header-nav-top .nav > li > a, #header .header-nav-top .nav > li > span {
  padding: 3px 5px 3px 0px;
 }
 #header .header-top .header-nav-top {
  margin-right: 0px;
  margin-top: 5px;
 }
 #header .header-top .header-search {
  margin-right: 0px;
 }
 #header .header-search{
  margin: 15px 0 8px 5px;
 }
 #header .header-search .search-toggle {
  background-color: #222222;
  color: #fff;
 }
}
/*#s008 - Logo*/
#header.header-narrow .header-logo img{
 margin: 0px;
}
#header.header-narrow .header-logo img:hover{
 opacity: 0.7;
}
@media only screen and (max-width:992px){
 .header-column:first-child {
  width: 10%;
 }
 #header.header-narrow .header-logo {
  margin-top: 10px;
 }
 #header .header-logo img {
  width: 130px;
 }
}
/*#s008 - Header*/
#header.header-transparent .header-body:before {
 opacity: 0 !important;
}
#header .header-body{
 padding-bottom: 0;
 border-top: 0px;
 border-bottom: 0px;
}
#header .header-nav-main {
               font-size:20px; 
               position: relative;
               margin: 0 auto;    
              width: 870px;  
             background: hotpink;         
   }
#header .header-nav-main .nav.nav-pills {
    border-bottom: 2px solid rgba(35, 157, 253, 0.5);
 position: relative;
}
#header .header-nav-main > nav > ul > li > a{
    padding: 20px 28px !important;
    border-radius: 0px;
 font-size: 18px;
    font-weight: 500;
 color: #ddd;
 display: inline-block;
     margin: 0 auto;   
   }
#header .header-nav-main nav > ul > li.dropdown:hover > .dropdown-menu,
#header .header-nav-main nav > ul > li.dropdown > .dropdown-menu {
 margin-top: 0px;
    margin-bottom: 0px;
    border: 0px;
    border-radius: 0px;
    background-color: rgba(0, 46, 65, 0.7);
   left: 0px;
    padding: 2 40px;
 width: 100%;
}
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a {
    padding: 0px 25px !important;
    font-size: 0.9em;
 color: #cacaca;
 border-color: #666;
}
#header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a:hover {
    color: #fff;
 background-color: transparent;
}
#header .header-nav-main nav > ul > li.open > a, 
#header .header-nav-main nav > ul > li:hover > a,
#header .header-nav-main > nav > ul > li > a:hover{
 border-color: #ff1e1e;
}
#header .header-nav-main nav > ul > li.open > a, 
#header .header-nav-main nav > ul > li:hover > a {
 background: transparent;
}
#header .header-nav-main nav > ul > li > a.dropdown-toggle:after,
#header .header-nav-main nav > ul > li.active > a.dropdown-toggle:after, 
html #header .header-nav-main nav > ul > li:hover > a.dropdown-toggle:after {
 border: 0px;
}
@media only screen and (max-width:992px) {
 #header .header-nav-main nav > ul > li.dropdown:hover > .dropdown-menu,
 #header .header-nav-main nav > ul > li.dropdown > .dropdown-menu {
  background-color: #fff;
 }
 #header .header-nav-main nav > ul > li.dropdown:hover > .dropdown-menu:before {
  display: none;
 }
 #header .header-nav-main nav > ul > li.open > a, 
 #header .header-nav-main nav > ul > li:hover > a {
     color: rgba(255,255,255,0.8) !important;
  border-color: #fff;
  color: #000 !important;
 }
    #header .header-nav-main nav > ul > li > a{
        line-height: inherit;
  color: #555 !important;
        padding: 7px 8px 3px 8px !important;
    }
 #header .header-nav-main nav > ul > li > .dropdown-menu > li {
  border: 0px;
 }
 #header .header-nav-main nav > ul > li > .dropdown-menu > li > a {
  color: #aaa !important;
 }
 #header .header-nav-main nav > ul > li > .dropdown-menu > li > a:hover {
  color: #000 !important;
 }
 #header .header-nav-main nav > ul > li.dropdown:hover > .dropdown-menu,
 #header .header-nav-main nav > ul > li.dropdown > .dropdown-menu {
  border-bottom: 0px;
 }
 #header .header-nav-main nav > ul > li.dropdown .dropdown-menu li a:hover {
  color: rgba(255,255,255,0.8);
 } 
}
@media only screen and (max-width: 766px) {
 nav>ul>li>a:hover,
    nav>ul>li>a:focus{
  color: #0088cc !important;
 }
}
/*mega*/
#header .header-nav-main nav > ul > li.dropdown-mega .dropdown-mega-content {
    padding: 16px 0px;
}
#header .header-nav-main nav > ul > li.dropdown-mega .dropdown-mega-sub-nav > li > a {
    margin: 0;
    padding: 1px 1px;
    text-align: 10px;
}
@media (max-width: 800px){
 #header .header-nav-main {
  display: none;
 }
}
/*mmenu btn*/
.mmenu-toggle-btn {
 display: block;
 height: auto;
 text-align: center;
 padding: 6px 12px;
 float: right;
 font-size: 13px;
    line-height: 20px;
    min-width: 25px;
 vertical-align: middle;
 color: #fff;
}
@media (min-width: 992px) {
 .mmenu-toggle-btn {
  display: none;
 }
}
@media (max-width: 991px) {
 .mmenu-toggle-btn {
  margin-top: 10px;
 }
}
.mmenu-toggle-btn:hover, .mmenu-toggle-btn:focus {
 color: #fff;
 text-decoration: none;

 

----------------------------

3. 메뉴파일

 

-----------------------

<nav>
 <ul class="nav nav-pills" id="mainNav">
  <li class="dropdown dropdown-mega">
   <a class="dropdown-toggle" href="<?php echo G5_THEME_URL;?>/index/company_01.php">
    기업소개
   </a>
   <a class="dropdown-toggle" href="<?php echo G5_THEME_URL;?>/index/business_01.php">
    사업소개
   </a>
   <a class="dropdown-toggle" href="<?php echo G5_BBS_URL;?>/board.php?bo_table=portfolio&sca=<?=urlencode("포트폴리오1")?>">
    홍보센터
   </a>
   <a class="dropdown-toggle" href="<?php echo G5_BBS_URL;?>/board.php?bo_table=recruit">
    인재채용
   </a>
   <a class="dropdown-toggle" href="<?php echo G5_BBS_URL;?>/board.php?bo_table=basic">
    고객지원
   </a>
   
   <ul class="dropdown-menu">
    <li>
     <div class="dropdown-mega-content">
      <div class="row">
       <div class="col-md-1-5 p-none">
        <ul class="dropdown-mega-sub-nav">
         <li><a href="<?php echo G5_THEME_URL;?>/index/company_01.php">CEO인사말</a></li>
         <li><a href="<?php echo G5_THEME_URL;?>/index/company_02.php">기업소개 </a></li>
         <li><a href="<?php echo G5_BBS_URL;?>/board.php?bo_table=history">회사연혁</a></li>
         <li><a href="<?php echo G5_THEME_URL;?>/index/company_04.php">오시는길</a></li>
        </ul>
       </div>
       <div class="col-md-1-5 p-none">
        <ul class="dropdown-mega-sub-nav">
         <li><a href="<?php echo G5_THEME_URL;?>/index/business_01.php">사업소개</a></li>
        </ul>
       </div>
       <div class="col-md-1-5 p-none">
        <ul class="dropdown-mega-sub-nav">
         <li><a href="<?php echo G5_BBS_URL;?>/board.php?bo_table=portfolio&sca=<?=urlencode("포트폴리오1")?>">포트폴리오</a></li>
         <li><a href="<?php echo G5_BBS_URL;?>/board.php?bo_table=promote&sca=<?=urlencode("홍보자료1")?>">홍보자료</a></li>
        </ul>
       </div>
       <div class="col-md-1-5 p-none">
        <ul class="dropdown-mega-sub-nav">
         <li><a href="<?php echo G5_BBS_URL;?>/board.php?bo_table=recruit">인재채용</a></li>
        </ul>
       </div>
       <div class="col-md-1-5 p-none">
        <ul class="dropdown-mega-sub-nav">
         <li><a href="<?php echo G5_BBS_URL;?>/board.php?bo_table=basic">공지사항</a></li>
        </ul>
        <ul class="dropdown-mega-sub-nav">
         <li><a href="<?php echo G5_BBS_URL;?>/board.php?bo_table=online">온라인상담</a></li>
        </ul>
       </div>
      </div>
     </div>
    </li>
   </ul>
  </li>
 </ul>
</nav>

---------------------------

 

 

이 질문에 댓글 쓰기 :

답변 3

이렇게 긴 소스를 제시하면 보기도어렵고 확인하기도 그렇지요.

운영중인 사이트 url을 알려주시거나

브라우저의 개발자도구를 이용하면 원하는 곳의 css를 바로 확인할 수 있습니다.

브라우저로 열고 해당위치에서 마우스 오른쪽 클릭하여 요소검사를하면 해당부위에 영향을 주는 css를 확인이 가능합니다.

먼저 개발자도구와 관련된 강의를 잠깐 보시는 것도 도움이 됩니다.

 

https://www.youtube.com/watch?v=av2HywPm8LM 

https://www.youtube.com/watch?v=dE8KNJNHifQ 

답변을 작성하시기 전에 로그인 해주세요.
전체 10
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT