<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("li.mainmenu ul").hide();
$("li.mainmenu").hover(
function(){
$("ul", this).fadeIn(1000);
},
function(){
$("ul", this).fadeOut(1000);
});
});
</script>
</head>
<body>
<table>
<tr>
<td height = "100">
<li class="mainmenu">
<a href="#">메인메뉴1</a>
<ul>
<a href="#">서브메뉴1-1</a></li>
<a href="#">서브메뉴1-2</a></li>
<a href="#">서브메뉴1-3</a></li>
</ul>
</li>
<td>
<td height = "100">
<li class ="mainmenu">
<ul>
<a href="#">서브메뉴3-1</a></li>
<a href="#">서브메뉴3-2</a></li>
<a href="#">서브메뉴3-3</a></li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
다음과같이 제작하였는데요 !
그 이걸 실행해보면 메인메뉴에 마우스를 가져다대면 그 서브 매뉴들 크기만큼 밀리게 되는데요 !
메인메뉴는 가만히 있고 서브메뉴만 fadein 되게 할수있을까요?
베스트금지
글쓰기