CSS와 관련된 팁이 있는 곳입니다. 좋은 자료 공유해 주세요.
글 수 123
0
조회 수 : 8985 신고 : 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개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시
![BEST](/modules/board/skins/xe_webmini/img/common/icon_bestreply.gif)
추천수에 따른 배경색 보기
본문으로 바로가기
- 추천수 50개이상
- 추천수 30개이상
- 추천수 20개이상
- 추천수 10개이상
- 추천수 3개이상
![](/modules/board/skins/xe_webmini/img/pc_emot_co.gif)
첫번째 댓글을 남겨주세요!