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

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

더블피디 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2016.10.09 11:24:14 2701 (122.♡.♡.247)

답변 3

본문

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

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

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

이런식으로 하려는데요

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

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

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


<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>