게시판에 해당되는 것은 아니고..간단한 소개 페이지에 2단메뉴를 만들려는데요(코드첨부)

게시판에 해당되는 것은 아니고..간단한 소개 페이지에 2단메뉴를 만들려는데요(코드첨부)

QA

SIR 제작의뢰 - 견적무료/익명보정/호스팅, DB 이전/단기개발. 이젠 ' 의뢰인'이 원하는 '제작자'에게만 연락처를 알릴 수 있습니다.

게시판에 해당되는 것은 아니고..간단한 소개 페이지에 2단메뉴를 만들려는데요(코드첨부)

본문

아래 1단 포털, 영화, 음악, 뉴스 밑에

포털에 해당되는 url정보 나열, 

영화에 해당되는 url정보 나열...

 

이런식으로 하려는데요

 

 

아래 첨부한 코드는 아래와 왼쪽처럼 처리됩니다. 

이 부분을 1단 메뉴는 동일 크기로 고정

2단 메뉴는 좌측정렬이 되도록 하려는데요 

82b0eaaee59b91478638bc06e4a5d92d_1475986529_3146.png
82b0eaaee59b91478638bc06e4a5d92d_1475986529_0549.png
 

 

 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
<!--
//글로벌 네비게이션(2Depth 메뉴그룹)에 대한 마우스 또는 키보드 반응(보임/숨김)설정
function activeGNB(id) {
for(num=1; num<=3; num++) document.getElementById('gm'+num).style.display='none'; //D2MG1~D2MG4 까지 숨긴 다음
document.getElementById(id).style.display='block'; //해당 ID만 보임
}
//-->
</script>
<style type="text/css">
* { margin:0; padding:0; border:0; }
ul { list-style:none }
a {color:#FFFFFF; text-decoration:none }
a:hover,
a:focus,
a:active { color:#FFFF00; text-decoration:none; font-weight:bold }
/* 레이아웃 */
#gnb { position:relative;  margin-bottom:10px; }
/* 글로벌 메뉴 배치 */
#gnb:after { content:""; display:block; clear:both; }
#gnb li { float:left; text-align:center; background-color:silver; border:1px solid black;}
#gnb li li { float:left; width:auto; text-align:left; }
#gnb li a { display:block; height:20px;}
#gnb li li a { display:inline; height:auto; padding:0; margin:0 10px; }
#gnb ul { position:relative;}
#gnb ul ul { position:relative; top:38px; display:none; white-space:nowrap; }
#gnb ul#gm1 { left:0; }
#gnb ul#gm2 { left:25%; }
#gnb ul#gm3 { left:50%; }
</style>
<!--[if IE]>
<style type="text/css">
#body,
#gnb,
#gnb li a,
#gnb ul{ zoom:1;}
#gnb ul ul{ _width:100%;}
</style>
<![endif]-->
</head>
<body>
<div id="gnb">
<ul>
 <li class="g1"><a href="#" OnMouseOver="activeGNB('gm1');" onfocus="activeGNB('gm1');">about us</a>
  <ul id="gm1">
    <li><a href="#">회사개요</a></li>
    <li><a href="#">찾아오시는길</a></li>
  </ul> 
 </li>
 <li class="g1"><a href="#" OnMouseOver="activeGNB('gm2');" onfocus="activeGNB('gm2');">business</a>
  <ul id="gm2">
   <li><a href="#">사업분야</a></li>
   <li><a href="#">GIS</a></li>
   <li><a href="#">ESL</a></li>
   <li><a href="#">SMARTPHONE</a></li>
  </ul>
 </li>
 <li class="g1"><a href="#" OnMouseOver="activeGNB('gm3');" onfocus="activeGNB('gm3');">contact us</a>
  <ul id="gm3">
   <li><a href="#">공지사항</a></li>
   <li><a href="#">게시판</a></li>
  </ul>
 </li>
</ul>
</div>
</body>
이 글을 내 페이스북 계정으로 보내기 이 글을 내 트위터 계정으로 보내기 이 글을 내 구글플러스 계정으로 보내기

이 질문에 댓글 쓰기 :

답변 3

채택됨

그림자밟기님의 답변

요건 테스트를 해봐야 될 듯 한데요.

 

#gnb ul ul { position:relative; top:38px; display:none; white-space:nowrap; } 

 

=>

 

#gnb ul ul { position:absolute; top:38px; display:none; white-space:nowrap; } 

 

요렇게 한 번 변경해보십시오.

 

주소복사
채택됨
답변의 댓글

그림자밟기님의 답변

추가

#gnb li.g1 {width:25%}

 

변경

#gnb ul#gm1 {left:0;}

#gnb ul#gm2 {left:0;}

#gnb ul#gm3 {left:0;}

 

주소복사
답변의 댓글

더블피디님의 답변

알려주신 내용으로 처리하니까. 

1단계 메뉴고정되고(25%씩) 고정되고 

2단계 메뉴는 좌측정렬이 정상적으로 되었습니다.

 

2단계 메뉴가 길어지면 아래 그림처럼 한줄 두줄...이렇게 나도록 하려는데

css 어느 정보를 수정해야할지??

 

 

아래와 같이 처리하려고하는데요 

82b0eaaee59b91478638bc06e4a5d92d_1475989265_0454.png
 

82b0eaaee59b91478638bc06e4a5d92d_1475989915_7512.png
 

주소복사
답변의 댓글
답변을 작성하시기 전에 로그인 해주세요.
전체 0
고마운 분의 도움으로 질문을 해결하셨다면, 채택을 눌러서 감사의 마음을 전하세요.
어떻게 질문해야 할지 모른다면 질문하는 방법을 읽어 보신후 질문해 보세요.
QA 내용 검색
  • 개별 목록 구성 제목 답변작성자조회작성일
  • 게시물이 없습니다.

회원로그인

진행중 포인트경매

  1. PHP 7 예비학교 - 냑과 함께 개발자 첫걸음

    참여34 회 시작19.12.11 14:22 종료19.12.14 14:22
  2. 강릉의 명물 초당/안목 커피빵

    참여9 회 시작19.12.10 11:21 종료19.12.17 11:21
  3. 특정 회원 포인트내역 통합(정리)하기

    참여3 회 시작19.12.06 22:31 종료19.12.13 22:31

(주)에스아이알소프트 (06253) 서울특별시 강남구 도곡로1길 14, 6층 624호 (역삼동, 삼일프라자) 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT