index 파일입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title></title>
<link type="text/css" rel="stylesheet" href="type/common.css" />
<script type="text/javascript" src="type/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="header">
<h1><a href="/"><img src="image/logo.jpg" /></a></h1>
<div class="navigation">
<ul class="topnav">
<li><a href="#">회사소개</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li><a href="#">사업개요</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>");
$("ul.topnav li").mouseover(function() {
$(this).parent().find("ul.subnav").slideDown('fast').show();
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow');
});
}).hover(function() {
$(this).addClass("subhover");
}, function(){
$(this).removeClass("subhover");
});
});
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title></title>
<link type="text/css" rel="stylesheet" href="type/common.css" />
<script type="text/javascript" src="type/jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="header">
<h1><a href="/"><img src="image/logo.jpg" /></a></h1>
<div class="navigation">
<ul class="topnav">
<li><a href="#">회사소개</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li><a href="#">사업개요</a>
<ul class="subnav">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>");
$("ul.topnav li").mouseover(function() {
$(this).parent().find("ul.subnav").slideDown('fast').show();
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow');
});
}).hover(function() {
$(this).addClass("subhover");
}, function(){
$(this).removeClass("subhover");
});
});
</script>
</body>
</html>
</html>
css파일입니다.
/*navigation*/
ul.topnav {padding:0 20px; margin:0; width:920px; background:#222; font-size:1.2em; background:url() repeat-x;}
ul.topnav {padding:0 20px; margin:0; width:920px; background:#222; font-size:1.2em; background:url() repeat-x;}
ul.topnav li {margin:0; padding:0 15px 0 0; position:relative;}
ul.topnav li a {padding:10px 5px; color:#29f483; display:block; text-decoration:none; float:left;}
ul.topnav li a:hover {background:url() no-repeat center top;}
ul.topnav li a {padding:10px 5px; color:#29f483; display:block; text-decoration:none; float:left;}
ul.topnav li a:hover {background:url() no-repeat center top;}
/*ul.topnav li span {width:17px; height:35px; float:left; background:url(1.jpg) no-repeat center top;}*/
/*ul.topnav li span.subhover {background-position:center bottombottom; cursor:pointer;}*/
ul.topnav li ul.subnav {position:absolute; left:0; top:35px; background:#333; margin:0; padding:0; display:none; float:left; width:170px; border:1px solid #111;}
ul.topnav li ul.subnav li{margin:0; padding:0; border-top:1px solid #252525; border-bottom:1px solid #444; clear:both; width:170px;}
html ul.topnav li ul.subnav li a {float:left; width:145px; background:#333 url() no-repeat 10px center; padding-left:20px;} html ul.topnav li ul.subnav li a:hover {background:#222 url() no-repeat 10px center;}
ul.topnav li ul.subnav {position:absolute; left:0; top:35px; background:#333; margin:0; padding:0; display:none; float:left; width:170px; border:1px solid #111;}
ul.topnav li ul.subnav li{margin:0; padding:0; border-top:1px solid #252525; border-bottom:1px solid #444; clear:both; width:170px;}
html ul.topnav li ul.subnav li a {float:left; width:145px; background:#333 url() no-repeat 10px center; padding-left:20px;} html ul.topnav li ul.subnav li a:hover {background:#222 url() no-repeat 10px center;}
원래 소스는 메뉴 옆 빈공간을 만들어 클릭시에 메뉴가 드롭다운 되게 하는 구조입니다.
제가 수정한 부분은 bold처리 된 부분이며, 위 소스대로 수정 후 실행시 아시다시피 모든 메뉴가 한번에 드롭다운 됩니다.
메뉴에 마우스 오버를 했을 시 마우스오버 된 메뉴의 서브메뉴만 노출되게 하고 싶습니다.
조언부탁드립니다.
html의 script 수정부분은 ul.topnav li span 부분을 ul.topnav li 로 수정하였으며, css는 수정하지 않았으며 주석처리만 해놓았습니다.
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5430 | 13년 전 | 1463 | ||
| 5429 |
phpman
|
13년 전 | 874 | |
| 5428 | 13년 전 | 1262 | ||
| 5427 |
phpman
|
13년 전 | 858 | |
| 5426 |
PHPㅡASP프로그래머
|
13년 전 | 1093 | |
| 5425 | 13년 전 | 802 | ||
| 5424 | 13년 전 | 745 | ||
| 5423 | 13년 전 | 749 | ||
| 5422 | 13년 전 | 1845 | ||
| 5421 |
PHPㅡASP프로그래머
|
13년 전 | 811 | |
| 5420 |
 Jeco7 |
13년 전 | 1640 | |
| 5419 | 13년 전 | 832 | ||
| 5418 | 13년 전 | 718 | ||
| 5417 | 13년 전 | 641 | ||
| 5416 | 13년 전 | 1002 | ||
| 5415 | 13년 전 | 793 | ||
| 5414 | 13년 전 | 740 | ||
| 5413 | 13년 전 | 821 | ||
| 5412 | 13년 전 | 1385 | ||
| 5411 | 13년 전 | 900 | ||
| 5410 | 13년 전 | 1296 | ||
| 5409 | 13년 전 | 4287 | ||
| 5408 | 13년 전 | 1006 | ||
| 5407 |
ckflower
|
13년 전 | 2454 | |
| 5406 |
ddokkani
|
13년 전 | 1406 | |
| 5405 | 13년 전 | 1610 | ||
| 5404 | 13년 전 | 686 | ||
| 5403 | 13년 전 | 720 | ||
| 5402 |
밤거리빵빵
|
13년 전 | 6035 | |
| 5401 |
PHPㅡASP프로그래머
|
13년 전 | 992 | |
| 5400 |
 cshop |
13년 전 | 1225 | |
| 5399 | 13년 전 | 5023 | ||
| 5398 |
부산아무개
|
13년 전 | 1673 | |
| 5397 | 13년 전 | 2468 | ||
| 5396 | 13년 전 | 1861 | ||
| 5395 | 13년 전 | 1070 | ||
| 5394 | 13년 전 | 1153 | ||
| 5393 | 13년 전 | 1059 | ||
| 5392 |
아르toria
|
13년 전 | 781 | |
| 5391 |
 아지야학교가자 |
13년 전 | 1160 | |
| 5390 |
디지털홍익인간
|
13년 전 | 7727 | |
| 5389 | 13년 전 | 3127 | ||
| 5388 | 13년 전 | 882 | ||
| 5387 |
WaaNee
|
13년 전 | 1923 | |
| 5386 | 13년 전 | 2119 | ||
| 5385 | 13년 전 | 4638 | ||
| 5384 | 13년 전 | 956 | ||
| 5383 | 13년 전 | 2149 | ||
| 5382 | 13년 전 | 683 | ||
| 5381 |
JacobJeon
|
13년 전 | 1098 | |
| 5380 | 13년 전 | 1152 | ||
| 5379 | 13년 전 | 690 | ||
| 5378 | 13년 전 | 10486 | ||
| 5377 | 13년 전 | 886 | ||
| 5376 | 13년 전 | 1471 | ||
| 5375 | 13년 전 | 851 | ||
| 5374 | 13년 전 | 856 | ||
| 5373 | 13년 전 | 2073 | ||
| 5372 | 13년 전 | 1703 | ||
| 5371 |
cshop |
13년 전 | 1651 | |
| 5370 | 13년 전 | 2917 | ||
| 5369 |
아자12345
|
13년 전 | 1027 | |
| 5368 | 13년 전 | 721 | ||
| 5367 | 13년 전 | 1100 | ||
| 5366 | 13년 전 | 2161 | ||
| 5365 | 13년 전 | 1577 | ||
| 5364 | 13년 전 | 1107 | ||
| 5363 |
cshop |
13년 전 | 1383 | |
| 5362 | 13년 전 | 838 | ||
| 5361 | 13년 전 | 1413 | ||
| 5360 | 13년 전 | 779 | ||
| 5359 | 13년 전 | 1412 | ||
| 5358 | 13년 전 | 1251 | ||
| 5357 | 13년 전 | 1649 | ||
| 5356 | 13년 전 | 1137 | ||
| 5355 |
techer
|
13년 전 | 1385 | |
| 5354 |
 몽키D팡야 |
13년 전 | 1040 | |
| 5353 | 13년 전 | 760 | ||
| 5352 | 13년 전 | 851 | ||
| 5351 | 13년 전 | 1225 | ||
| 5350 | 13년 전 | 761 | ||
| 5349 |
cshop |
13년 전 | 1447 | |
| 5348 | 13년 전 | 854 | ||
| 5347 | 13년 전 | 760 | ||
| 5346 | 13년 전 | 883 | ||
| 5345 | 13년 전 | 821 | ||
| 5344 |
후라보노보노
|
13년 전 | 1961 | |
| 5343 | 13년 전 | 1166 | ||
| 5342 | 13년 전 | 1133 | ||
| 5341 | 13년 전 | 2078 | ||
| 5340 |
 미운오리스키 |
13년 전 | 1121 | |
| 5339 |
AMDbest
|
13년 전 | 744 | |
| 5338 | 13년 전 | 739 | ||
| 5337 |
프로프리랜서
|
13년 전 | 1489 | |
| 5336 |
프로프리랜서
|
13년 전 | 938 | |
| 5335 | 13년 전 | 735 | ||
| 5334 |
cshop |
13년 전 | 984 | |
| 5333 | 13년 전 | 2849 | ||
| 5332 | 13년 전 | 1535 | ||
| 5331 | 13년 전 | 1334 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기