![[2021/12/27]국비지원 CSS3 7-(2) 메뉴 hover 효과 주기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbJi5L6%2Fbtrr3mww9ww%2FAAAAAAAAAAAAAAAAAAAAAGZJ2pDDwcbALVloC7JArUWK82Ubx9yeqdh2WbO6eqSX%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1756652399%26allow_ip%3D%26allow_referer%3D%26signature%3D722N0U9BCG4QChnC8d1xPpXP%252BcI%253D)
- 메뉴 목록에 hover 효과 주기
- background-image를 이용한 메뉴에 hover와
class를 이용한 focus고정 주기 ( pseudo-class가 아닌 html class명 ) - Script_Navi ( header 메뉴 )
1. 메뉴목록의 버튼에 hover 효과 주기
방법 : 클릭기능 없이, hover만 했을 때 변경되는 효과를 확인할 수 있도록.
메뉴1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>menu1<title>
<style type="text/css">
body,ul,li{margin: 0;padding: 0;}
body{font-size: 12px;font-family:Dotum,"돋움",sans-serif;}
ul,li{list-style: none;}
img{border: none;}
/* 이하 */
li{float:left;margin: 1px;}
li a{display:block;width:150px;height:40px;background-color:#c00;
color: #fff;text-decoration: none;text-align: center;padding-top:10px;}
/* line-height와 height값을 동일하게 해주면 세로 가운데정렬 ok */
/* 다만 줄 띄기 없이 두 줄 만들 경우 첫 해당영역에 padding-top을 넣어주고 line-height를 제외 */
li a span{display:block;}
li a:hover{background-color: #099;text-decoration: underline;}
</style>
</head>
<body>
<ul>
<li><a href="#">COMPANY<span>회사소개</span></a></li>
<li><a href="#">PRODUCT<span>제품소개</span></a></li>
<li><a href="#">SERVICE<span>유지보수</span></a></li>
<li><a href="#">CUSTOMMER<span>고객지원</span></a></li>
<li><a href="#">EDUCATION<span>교육세미나</span></a></li>
</ul>
</body>
</html>
메뉴2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>menu2<title>
<style type="text/css">
body,ul,li{margin: 0;padding: 0;}
body{font-size: 12px;font-family:Dotum,"돋움",sans-serif;}
ul,li{list-style: none;}
img{border: none;}
li{float: left;background:url(images/or.gif) repeat-x 100% 0;}
li a{display:block;width:100px;height:24px;background: url(images/orbr.gif) no-repeat 100% 0;
color: #fff;text-decoration: none;text-align: center;line-height: 25px;}
.none{background: none;}
li a:hover{color: #333;}
</style>
</head>
<body>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">회사소개</a></li>
<li><a href="#">뉴스</a></li>
<li><a href="#">제품</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">고객</a></li>
<li><a href="#" class="none">적용사례</a></li>
</ul>
</body>
</html>
메뉴3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>menu3</title>
<style type="text/css">
body,ul,li{margin: 0;padding: 0;}
body{font-size: 12px;font-family:Dotum,"돋움",sans-serif;}
ul,li{list-style: none;}
img{border: none;}
li{float: left;background:url(images/up.jpg) repeat-x 100% 0;}
li a{display:block;width:129px;height:27px;color: #fff;text-decoration: none;text-align: center;line-height: 25px;}
li a:hover{text-decoration: underline;background: url(images/over.jpg) no-repeat 100% 0;}
</style>
</head>
<body>
<ul>
<li><a href="#">COMPANY</a></li>
<li><a href="#">PRODUCT</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">CUSTOMMER</a></li>
<li><a href="#">EDUCATION</a></li>
</ul>
</body>
</html>
메뉴4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>menu4</title>
<style type="text/css">
body,ul,li{margin: 0;padding: 0;}
body{font-size: 12px;font-family:Dotum,"돋움",sans-serif;}
ul,li{list-style: none;}
img{border: none;}
/* 기능 유지, 모양 날리기 : text-indent: -9999px;overflow: hidden; */
li{float: left;}
li a{display:block;height:25px;text-decoration: none;text-align: center;line-height: 25px;
text-indent: -9999px;overflow: hidden;}
li.menu1{width:142px;background: url(images/company.jpg) no-repeat 0 0;}
li.menu1 a:hover{background: url(images/company_o.jpg) no-repeat 0 0;}
li.menu2{width:143px;background: url(images/products.jpg) no-repeat 0 0;}
li.menu2 a:hover{background: url(images/products_o.jpg) no-repeat 0 0;}
li.menu3{width:130px;background: url(images/service.jpg) no-repeat 0 0;}
li.menu3 a:hover{background: url(images/company_o.jpg) no-repeat 0 0;}
li.menu4{width:204px;background: url(images/customer.jpg) no-repeat 0 0;}
li.menu4 a:hover{background: url(images/customer_o.jpg) no-repeat 0 0;}
li.menu5{width:160px;background: url(images/education.jpg) no-repeat 0 0;}
li.menu5 a:hover{background: url(images/education_o.jpg) no-repeat 0 0;}
</style>
</head>
<body>
<ul>
<li class="menu1"><a href="#">COMPANY</a></li>
<li class="menu2"><a href="#">PRODUCT</a></li>
<li class="menu3"><a href="#">SERVICE</a></li>
<li class="menu4"><a href="#">CUSTOMMER</a></li>
<li class="menu5"><a href="#">EDUCATION</a></li>
</ul>
</body>
</html>
결과물1
결과물2
결과물3
결과물4
2. background-image를 이용한 메뉴에 hover와 class를 이용한 focus 고정 주기
( pseudo-class :focus가 아닌 html class="selected" )
방법 : 각 파일을 생성하고, 링크에 파일 주소를 입력시켜서 한 창에서 버튼마다 클릭하면 해당 파일로 주소가 변경되게끔 함
index ( Home )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
<style type="text/css">
body,ul,li{margin: 0;padding: 0;}
body{font-size: 90%px;line-height:1.5;font-family:Arial;}
ul,li{list-style: none;}
img{border: none;}
li{float:left;}
li a{display:block;width:109px;height:38px;text-indent: -9999px;overflow: hidden;
background: url(images/menu1.jpg) no-repeat 0 0;}
li.menu1 a{background: url(images/menu1.jpg) no-repeat 0 0;}
li.menu2 a{background: url(images/menu2.jpg) no-repeat 0 0;}
li.menu3 a{background: url(images/menu3.jpg) no-repeat 0 0;}
li.menu4 a{background: url(images/menu4.jpg) no-repeat 0 0;}
li a:hover{background-position: 0 -76px;}
li a.selected{background:url(images/menu1.jpg) no-repeat 0 -38px;}
</style>
</head>
<body>
<h1>Index</h1>
<p>원래는 회색, 현재페이지의 메뉴는 자주색, 오버메뉴는 라임색</p>
<hr>
<ul id="nav">
<li class="menu1"><a href="index.html" class="selected">home</a></li>
<li class="menu2"><a href="guide.html">guide</a></li>
<li class="menu3"><a href="magazine.html">magazine</a></li>
<li class="menu4"><a href="bbs.html">bbs</a></li>
</ul>
</body>
</html>
guide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>guide</title>
<style type="text/css">
body,ul,li{margin: 0;padding: 0;}
body{font-size: 90%px;line-height:1.5;font-family:Arial;}
ul,li{list-style: none;}
img{border: none;}
li{float:left;}
li a{display:block;width:109px;height:38px;text-indent: -9999px;overflow: hidden;
background: url(images/menu1.jpg) no-repeat 0 0;}
li.menu1 a{background: url(images/menu1.jpg) no-repeat 0 0;}
li.menu2 a{background: url(images/menu2.jpg) no-repeat 0 0;}
li.menu3 a{background: url(images/menu3.jpg) no-repeat 0 0;}
li.menu4 a{background: url(images/menu4.jpg) no-repeat 0 0;}
li a:hover{background-position: 0 -76px;}
li a.selected{background:url(images/menu2.jpg) no-repeat 0 -38px;}
</style>
</head>
<body>
<h1>Guide</h1>
<p>원래는 회색, 현재페이지의 메뉴는 자주색, 오버메뉴는 라임색</p>
<hr>
<ul id="nav">
<li class="menu1"><a href="index.html">home</a></li>
<li class="menu2"><a href="guide.html" class="selected">guide</a></li>
<li class="menu3"><a href="magazine.html">magazine</a></li>
<li class="menu4"><a href="bbs.html">bbs</a></li>
</ul>
</body>
</html>
magazine
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>magazine</title>
<style type="text/css">
body,ul,li{margin: 0;padding: 0;}
body{font-size: 90%px;line-height:1.5;font-family:Arial;}
ul,li{list-style: none;}
img{border: none;}
li{float:left;}
li a{display:block;width:109px;height:38px;text-indent: -9999px;overflow: hidden;
background: url(images/menu1.jpg) no-repeat 0 0;}
li.menu1 a{background: url(images/menu1.jpg) no-repeat 0 0;}
li.menu2 a{background: url(images/menu2.jpg) no-repeat 0 0;}
li.menu3 a{background: url(images/menu3.jpg) no-repeat 0 0;}
li.menu4 a{background: url(images/menu4.jpg) no-repeat 0 0;}
li a:hover{background-position: 0 -76px;}
li a.selected{background:url(images/menu3.jpg) no-repeat 0 -38px;}
</style>
</head>
<body>
<h1>Magazine</h1>
<p>원래는 회색, 현재페이지의 메뉴는 자주색, 오버메뉴는 라임색</p>
<hr>
<ul id="nav">
<li class="menu1"><a href="index.html">home</a></li>
<li class="menu2"><a href="guide.html">guide</a></li>
<li class="menu3"><a href="magazine.html" class="selected">magazine</a></li>
<li class="menu4"><a href="bbs.html">bbs</a></li>
</ul>
</body>
</html>
bbs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bbs</title>
<style type="text/css">
body,ul,li{margin: 0;padding: 0;}
body{font-size: 90%px;line-height:1.5;font-family:Arial;}
ul,li{list-style: none;}
img{border: none;}
li{float:left;}
li a{display:block;width:109px;height:38px;text-indent: -9999px;overflow: hidden;
background: url(images/menu1.jpg) no-repeat 0 0;}
li.menu1 a{background: url(images/menu1.jpg) no-repeat 0 0;}
li.menu2 a{background: url(images/menu2.jpg) no-repeat 0 0;}
li.menu3 a{background: url(images/menu3.jpg) no-repeat 0 0;}
li.menu4 a{background: url(images/menu4.jpg) no-repeat 0 0;}
li a:hover{background-position: 0 -76px;}
li a.selected{background:url(images/menu4.jpg) no-repeat 0 -38px;}
</style>
</head>
<body>
<h1>BBS</h1>
<p>원래는 회색, 현재페이지의 메뉴는 자주색, 오버메뉴는 라임색</p>
<hr>
<ul id="nav">
<li class="menu1"><a href="index.html">home</a></li>
<li class="menu2"><a href="guide.html">guide</a></li>
<li class="menu3"><a href="magazine.html">magazine</a></li>
<li class="menu4"><a href="bbs.html" class="selected">bbs</a></li>
</ul>
</body>
</html>
결과물1
결과물2
결과물3
결과물4
3. Script_Navi ( header 메뉴 )
▶ 기능 구현을 위해 제공 받은 js 코드 ◀
더보기
더보기
template_on.js
// Top Menu
window.onload = function (){
seq = 0;
nav = document.getElementById("gnb");
nav.menu = new Array();
nav.current = null;
nav.menuseq = 0;
navLen = nav.childNodes.length;
allA = nav.getElementsByTagName("a");
for(k = 0; k < allA.length; k++) {
allA.item(k).onmouseover = allA.item(k).onfocus = function () {
nav.isOver = true;
}
allA.item(k).onmouseout = allA.item(k).onblur = function () {
nav.isOver = false;
setTimeout(function () {
if (nav.isOver == false) {
if (nav.menu[seq])
nav.menu[seq].onmouseover();
else if(nav.current) {
menuImg = nav.current.childNodes.item(0);
menuImg.src = menuImg.src.replace("_on.gif", ".gif");
if (nav.current.submenu)
nav.current.submenu.style.display = "none";
nav.current = null;
}
}
}, 500);
}
}
for (i = 0; i < navLen; i++) {
navItem = nav.childNodes.item(i);
if (navItem.tagName != "LI")
continue;
navAnchor = navItem.getElementsByTagName("a").item(0);
navAnchor.submenu = navItem.getElementsByTagName("ul").item(0);
navAnchor.onmouseover = navAnchor.onfocus = function () {
if (nav.current) {
menuImg = nav.current.childNodes.item(0);
menuImg.src = menuImg.src.replace("_on.gif", ".gif");
if (nav.current.submenu)
nav.current.submenu.style.display = "none";
nav.current = null;
}
if (nav.current != this) {
menuImg = this.childNodes.item(0);
menuImg.src = menuImg.src.replace(".gif", "_on.gif");
if (this.submenu)
this.submenu.style.display = "block";
nav.current = this;
}
nav.isOver = true;
}
nav.menuseq++;
nav.menu[nav.menuseq] = navAnchor;
}
if (nav.menu[seq])
nav.menu[seq].onmouseover();
}
Script_Navi → 가로메뉴1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1.가로메뉴</title>
<script type="text/javascript" src="js/template_on.js"></script>
<style type="text/css">
/* common */
body,div,ul,li{margin: 0;padding: 0;}
body{font-size: 12px;font-family:Dotum,"돋움",sans-serif;}
ul,li{list-style: none;}
img{border: none;}
a{color: #666;text-decoration: none;}
a:hover{text-decoration: underline;}
/* layout */
.gnb{position:relative;}
.gnb li{float:left;margin-right: 20px;}
.gnb li>ul{position:absolute;left:0;top:20px;display:none;}
.gnb li.menu1 ul{left:0;}
.gnb li.menu2 ul{left:70px;}
.gnb li.menu3 ul{left:120px;}
.gnb li.menu4 ul{left:140px;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<!-- header -->
<ul id="gnb" class="gnb">
<li class="menu1"><a href="#"><img src="images/gnb_menu_1.gif" alt="웹접근성이란?"></a>
<ul>
<li><a href="#">하위메뉴1</a></li>
<li><a href="#">하위메뉴2</a></li>
<li><a href="#">하위메뉴3</a></li>
<li><a href="#">하위메뉴4</a></li>
</ul>
</li>
<li class="menu2"><a href="#"><img src="images/gnb_menu_2.gif" alt="웹접근성이란?"></a>
<ul>
<li><a href="#">하위메뉴1</a></li>
<li><a href="#">하위메뉴2</a></li>
<li><a href="#">하위메뉴3</a></li>
<li><a href="#">하위메뉴4</a></li>
</ul>
</li>
<li class="menu3"><a href="#"><img src="images/gnb_menu_3.gif" alt="웹접근성이란?"></a>
<ul>
<li><a href="#">하위메뉴1</a></li>
<li><a href="#">하위메뉴2</a></li>
<li><a href="#">하위메뉴3</a></li>
<li><a href="#">하위메뉴4</a></li>
</ul>
</li>
<li class="menu4"><a href="#"><img src="images/gnb_menu_4.gif" alt="웹접근성이란?"></a>
<ul>
<li><a href="#">하위메뉴1</a></li>
<li><a href="#">하위메뉴2</a></li>
<li><a href="#">하위메뉴3</a></li>
<li><a href="#">하위메뉴4</a></li>
</ul>
</li>
</ul>
</div>
<!-- //header -->
<!-- container 없음 -->
<div id="container"></div>
<!-- footer 없음 -->
<div id="footer"></div>
</div>
</body>
</html>
결과물
0123
Script_Navi → 가로메뉴2
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2.가로메뉴</title>
<script type="text/javascript" src="js/template_on.js"></script>
<style type="text/css">
/* common */
body,div,ul,li{margin: 0;padding: 0;}
body{font-size: 12px;font-family:Dotum,"돋움",sans-serif;}
ul,li{list-style: none;}
img{border: none;}
a{color: #fff;text-decoration: none;}
a:hover{text-decoration: underline;}
/* layout */
.gnb{position:relative;}
.gnb li{float:left;padding-right:10px;}
.gnb li ul{position:absolute;left: 0px;top:20px;display: none;}
.gnb li.menu1 ul{left:0;}
.gnb li.menu2 ul{left:70px;}
.gnb li.menu3 ul{left:120px;}
.gnb li.menu4 ul{left:139px;}
.gnb li ul li{background:#619a23; line-height:21px;}
.gnb li ul li.first{background: #619a23 url(images/round_first.gif) no-repeat 0 0;padding-left:10px;}
.gnb li ul li.end{background:#619a23 url(images/round_end.gif) no-repeat 100% 0;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<!-- header -->
<ul id="gnb" class="gnb">
<li class="menu1"><a href="#"><img src="images/gnb_menu_1.gif" alt="웹접근성이란?"></a>
<ul>
<li class="first"><a href="#">하위메뉴1</a></li>
<li><a href="#">하위메뉴2</a></li>
<li><a href="#">하위메뉴3</a></li>
<li class="end"><a href="#">하위메뉴4</a></li>
</ul>
</li>
<li class="menu2"><a href="#"><img src="images/gnb_menu_2.gif" alt="웹접근성이란?"></a>
<ul>
<li class="first"><a href="#">하위메뉴1</a></li>
<li><a href="#">하위메뉴2</a></li>
<li><a href="#">하위메뉴3</a></li>
<li class="end"><a href="#">하위메뉴4</a></li>
</ul>
</li>
<li class="menu3"><a href="#"><img src="images/gnb_menu_3.gif" alt="웹접근성이란?"></a>
<ul>
<li class="first"><a href="#">하위메뉴1</a></li>
<li><a href="#">하위메뉴2</a></li>
<li><a href="#">하위메뉴3</a></li>
<li class="end"><a href="#">하위메뉴4</a></li>
</ul>
</li>
<li class="menu4"><a href="#"><img src="images/gnb_menu_4.gif" alt="웹접근성이란?"></a>
<ul>
<li class="first"><a href="#">하위메뉴1</a></li>
<li><a href="#">하위메뉴2</a></li>
<li><a href="#">하위메뉴3</a></li>
<li class="end"><a href="#">하위메뉴4</a></li>
</ul>
</li>
</ul>
</div>
<!-- //header -->
<!-- container 없음 -->
<div id="container"></div>
<!-- footer 없음 -->
<div id="footer"></div>
</div>
</body>
</html>
결과물
0123
Script_Navi → 가로메뉴3
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3.가로메뉴</title>
<script type="text/javascript" src="js/template_on.js"></script>
<style type="text/css">
/* common */
body,div,ul,li{margin: 0;padding: 0;}
body{font-size: 12px;font-family:Dotum,"돋움",sans-serif;}
ul,li{list-style: none;}
img{border: none;}
a{color: #fff;text-decoration: none;}
a:hover{text-decoration: underline;}
/* layout */
.gnb{position:relative;}
.gnb li{float:left;padding-right:10px;}
.gnb li ul{position:absolute;left: 0px;top:21px;display: none;}
.gnb li.menu1 ul{left:0;}
.gnb li.menu2 ul{left:70px;}
.gnb li.menu3 ul{left:120px;}
.gnb li.menu4 ul{left:140px;}
.gnb li ul li{background:url(images/grbg.gif) repeat-x 0 0;line-height:21px;}
.gnb li ul li.first{background: url(images/first_grbg.gif) no-repeat 0 0;padding-left:10px;}
.gnb li ul li.end{background:url(images/end_grbg.gif) no-repeat 100% 0;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<!-- header -->
<ul id="gnb" class="gnb">
<li class="menu1"><a href="#"><img src="images/gnb_menu_1.gif" alt="웹접근성이란?"></a>
<ul>
<li class="first"><a href="#">하위메뉴1</a></li>
<li><a href="#">하위메뉴2</a></li>
<li><a href="#">하위메뉴3</a></li>
<li class="end"><a href="#">하위메뉴4</a></li>
</ul>
</li>
<li class="menu2"><a href="#"><img src="images/gnb_menu_2.gif" alt="웹접근성이란?"></a>
<ul>
<li class="first"><a href="#">하위메뉴1</a></li>
<li><a href="#">하위메뉴2</a></li>
<li><a href="#">하위메뉴3</a></li>
<li class="end"><a href="#">하위메뉴4</a></li>
</ul>
</li>
<li class="menu3"><a href="#"><img src="images/gnb_menu_3.gif" alt="웹접근성이란?"></a>
<ul>
<li class="first"><a href="#">하위메뉴1</a></li>
<li><a href="#">하위메뉴2</a></li>
<li><a href="#">하위메뉴3</a></li>
<li class="end"><a href="#">하위메뉴4</a></li>
</ul>
</li>
<li class="menu4"><a href="#"><img src="images/gnb_menu_4.gif" alt="웹접근성이란?"></a>
<ul>
<li class="first"><a href="#">하위메뉴1</a></li>
<li><a href="#">하위메뉴2</a></li>
<li><a href="#">하위메뉴3</a></li>
<li class="end"><a href="#">하위메뉴4</a></li>
</ul>
</li>
</ul>
</div>
<!-- //header -->
<!-- container 없음 -->
<div id="container"></div>
<!-- footer 없음 -->
<div id="footer"></div>
</div>
</body>
</html>
결과물
0123
Script_Navi → 세로메뉴
( 이 경우는 Sidebar 가 맞을 듯 )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1.세로메뉴</title>
<!-- .js connecting -->
<script type="text/javascript" src="js/template_on.js"></script>
<style type="text/css">
/* common */
body,div,ul,li{margin: 0;padding: 0;}
body{font-size: 12px;font-family:Dotum,"돋움",sans-serif;}
ul,li{list-style: none;}
img{border: none;}
a{color: #666;text-decoration: none;}
a:hover{text-decoration: underline;}
/* layout */
.gnb>li>ul{display:none; width:150px}
.gnb>li>ul>li{padding-left: 10px;line-height: 1.5;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<!-- header -->
<ul id="gnb" class="gnb">
<li><a href="#"><img src="images/gnb_menu_1.gif" alt="웹접근성이란?"></a>
<ul>
<li><a href="#">하위메뉴1</a></li>
<li><a href="#">하위메뉴2</a></li>
<li><a href="#">하위메뉴3</a></li>
<li><a href="#">하위메뉴4</a></li>
</ul>
</li>
<li><a href="#"><img src="images/gnb_menu_2.gif" alt="웹접근성이란?"></a>
<ul>
<li><a href="#">하위메뉴1</a></li>
<li><a href="#">하위메뉴2</a></li>
<li><a href="#">하위메뉴3</a></li>
<li><a href="#">하위메뉴4</a></li>
</ul>
</li>
<li><a href="#"><img src="images/gnb_menu_3.gif" alt="웹접근성이란?"></a>
<ul>
<li><a href="#">하위메뉴1</a></li>
<li><a href="#">하위메뉴2</a></li>
<li><a href="#">하위메뉴3</a></li>
<li><a href="#">하위메뉴4</a></li>
</ul>
</li>
<li><a href="#"><img src="images/gnb_menu_4.gif" alt="웹접근성이란?"></a>
<ul>
<li><a href="#">하위메뉴1</a></li>
<li><a href="#">하위메뉴2</a></li>
<li><a href="#">하위메뉴3</a></li>
<li><a href="#">하위메뉴4</a></li>
</ul>
</li>
</ul>
</div>
<!-- //header -->
<!-- container 없음 -->
<div id="container"></div>
<!-- footer 없음 -->
<div id="footer"></div>
</div>
</body>
</html>
결과물
0123