CSS와 관련된 팁이 있는 곳입니다. 좋은 자료 공유해 주세요.
글 수 123
0
조회 수 : 8986 신고 : 0
| 미리보기 : |
|---|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<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>
</html>
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시
아이콘이 붙게됩니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시
아이콘이 붙게됩니다.
첫번째 댓글을 남겨주세요!
- 추천수 50개이상
- 추천수 30개이상
- 추천수 20개이상
- 추천수 10개이상
- 추천수 3개이상
닫기