게시판에 해당되는 것은 아니고..간단한 소개 페이지에 2단메뉴를 만들려는데요(코드첨부) 채택완료
더블피디
9년 전
조회 4,105
아래 1단 포털, 영화, 음악, 뉴스 밑에
포털에 해당되는 url정보 나열,
영화에 해당되는 url정보 나열...
이런식으로 하려는데요
아래 첨부한 코드는 아래와 왼쪽처럼 처리됩니다.
이 부분을 1단 메뉴는 동일 크기로 고정
2단 메뉴는 좌측정렬이 되도록 하려는데요
</p><p><head></p><p><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></p><p><script type="text/javascript"></p><p><!--</p><p>//글로벌 네비게이션(2Depth 메뉴그룹)에 대한 마우스 또는 키보드 반응(보임/숨김)설정</p><p>function activeGNB(id) {</p><p>for(num=1; num<=3; num++) document.getElementById('gm'+num).style.display='none'; //D2MG1~D2MG4 까지 숨긴 다음</p><p>document.getElementById(id).style.display='block'; //해당 ID만 보임</p><p>}</p><p>//--></p><p></script></p><p><style type="text/css"></p><p>* { margin:0; padding:0; border:0; }</p><p>ul { list-style:none }</p><p>a {color:#FFFFFF; text-decoration:none }</p><p>a:hover,</p><p>a:focus,</p><p>a:active { color:#FFFF00; text-decoration:none; font-weight:bold }</p><p>/* 레이아웃 */</p><p>#gnb { position:relative; margin-bottom:10px; }</p><p>/* 글로벌 메뉴 배치 */</p><p>#gnb:after { content:""; display:block; clear:both; }</p><p>#gnb li { float:left; text-align:center; background-color:silver; border:1px solid black;}</p><p>#gnb li li { float:left; width:auto; text-align:left; }</p><p>#gnb li a { display:block; height:20px;}</p><p>#gnb li li a { display:inline; height:auto; padding:0; margin:0 10px; }</p><p>#gnb ul { position:relative;}</p><p>#gnb ul ul { position:relative; top:38px; display:none; white-space:nowrap; }</p><p>#gnb ul#gm1 { left:0; }</p><p>#gnb ul#gm2 { left:25%; }</p><p>#gnb ul#gm3 { left:50%; }</p><p></style></p><p><!--[if IE]></p><p><style type="text/css"></p><p>#body,</p><p>#gnb,</p><p>#gnb li a,</p><p>#gnb ul{ zoom:1;}</p><p>#gnb ul ul{ _width:100%;}</p><p></style></p><p><![endif]--></p><p></head></p><p><body></p><p><div id="gnb"></p><p><ul></p><p> <li class="g1"><a href="#" OnMouseOver="activeGNB('gm1');" onfocus="activeGNB('gm1');">about us</a></p><p> <ul id="gm1"></p><p> <li><a href="#">회사개요</a></li></p><p> <li><a href="#">찾아오시는길</a></li></p><p><span style="font-size: 11pt;"> </ul></span> </p><p> </li></p><p> <li class="g1"><a href="#" OnMouseOver="activeGNB('gm2');" onfocus="activeGNB('gm2');">business</a></p><p> <ul id="gm2"></p><p> <li><a href="#">사업분야</a></li></p><p> <li><a href="#">GIS</a></li></p><p> <li><a href="#">ESL</a></li></p><p> <li><a href="#">SMARTPHONE</a></li></p><p> </ul></p><p> </li></p><p> <li class="g1"><a href="#" OnMouseOver="activeGNB('gm3');" onfocus="activeGNB('gm3');">contact us</a></p><p> <ul id="gm3"></p><p> <li><a href="#">공지사항</a></li></p><p> <li><a href="#">게시판</a></li></p><p> </ul></p><p> </li></p><p></ul></p><p></div></p><p></body></p><p>
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
9년 전
요건 테스트를 해봐야 될 듯 한데요.
#gnb ul ul { position:relative; top:38px; display:none; white-space:nowrap; }
=>
#gnb ul ul { position:absolute; top:38px; display:none; white-space:nowrap; }
요렇게 한 번 변경해보십시오.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
더블피디
9년 전
감사드립니다.
댓글을 작성하려면 로그인이 필요합니다.
9년 전
알려주신 내용으로 처리하니까.
1단계 메뉴고정되고(25%씩) 고정되고
2단계 메뉴는 좌측정렬이 정상적으로 되었습니다.
2단계 메뉴가 길어지면 아래 그림처럼 한줄 두줄...이렇게 나도록 하려는데
css 어느 정보를 수정해야할지??
아래와 같이 처리하려고하는데요
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인