jquery 드롭다운메뉴 질문입니다.

락창

· 13년 전 · 조회 2796 2796

링크

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>

</body>
</html>

css파일입니다.

/*navigation*/
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 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;}

원래 소스는 메뉴 옆 빈공간을 만들어 클릭시에 메뉴가 드롭다운 되게 하는 구조입니다.

제가 수정한 부분은 bold처리 된 부분이며, 위 소스대로 수정 후 실행시 아시다시피 모든 메뉴가 한번에 드롭다운 됩니다.

메뉴에 마우스 오버를 했을 시 마우스오버 된 메뉴의 서브메뉴만 노출되게 하고 싶습니다.

조언부탁드립니다.

html의 script 수정부분은 ul.topnav li span 부분을 ul.topnav li 로 수정하였으며, css는 수정하지 않았으며 주석처리만 해놓았습니다.

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

팁게시판

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	제목	글쓴이	날짜	조회
4802	고수님들 도와주세요. "웹 페이지 오류 세부 정보"에러가 뜨는데 [2] #개발자 #javascript	미자엄마 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	6601
4801	구인 구직 사이트를 개발하고 싶은데 [3] #개발자 #기타	정승환 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	806
4800	www.hyundaiusa.com 메뉴를 좀 여쭤봅니다. [1] #개발자 #jquery	탐크루지 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	1131
4799	모바일 동영상게시판 그누보드스킨 중 무엇을 쓰면 좋을까요? #개발자 #mobile	막걸링 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	1094
4798	jquery 드롭다운메뉴 질문입니다. 현재 보는 글 #개발자 #jquery	락창 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2797
4797	JQuery 소스 해결 좀 부탁드립니다. #개발자 #jquery	흑루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	785
4796	UNION ALL 문의 드립니다람쥐~ ★★★★☆ [4] #개발자 #php	직화오리팡야 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	1161
4795	ssl 웹페이지 적용 질문 드립니다. [3] #퍼블리셔 #html	으다다 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	1741
4794	방문자 늘리기VS개발능력 간 교환이 가능한가요? [2] #기획자	꿈꾸는인생 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	1299
4793	공지사항이나 기타 메인페이지에 한줄씩 노출 [3] #개발자 #php	백제 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	1478
4792	ssl 웹페이지 적용 질문드립니다. [6] #퍼블리셔 #html	으다다 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	1679
4791	서브도메인 연결 오류...해결 부탁드립니다. [1] #개발자 #mobile	막걸링 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	726
4790	프로그램 개발의뢰 하려는데요.. [3] #개발자 #기타	세황이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	705
4789	고수님들 도움좀 부탁드립니다! #퍼블리셔 #html	가우류 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	1007
4788	웹 프로그래밍 강의사이트 [3] #개발자 #php	K찰스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	1047
4787	PhotoSwipe(갤러리) js 소스 해결좀 부탁드립니다. [2] #개발자 #javascript	흑루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	1810
4786	도메인 이탈을 이벤트로 알 수 있나요? [2] #개발자 #php	프토코이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	694
4785	초보자 궁금한게 있습니다! [3] #개발자 #javascript	high8sky 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	736
4784	네이버 순위 파싱 . php [1] #개발자 #php	Aten 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	3122
4783	SNS와 연동하는 방법에 대한 수업입니다. [2] #개발자 #php	켈리얀 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	866
4782	비밀글에 락이 걸리지 않습니다. 소스좀 봐주세요... [2] #개발자 #php	즐거운상상을 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	1132
4781	메뉴에서 무엇이 문제인가요? [2] #개발자 #jquery	포커슷 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	950
4780	스크립트 소숫점 자르기 #개발자 #javascript	K찰스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	1937
4779	안녕하세요~ RSS 질문입니다. [1] #개발자 #php	로날듀우 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	652
4778	리눅스 yum으로 apm설치하기 [1] #개발자 #linux	순천홈페이지 프로필 보기 이 회원 글보기 이 회원의 댓글보기	13년 전	2809