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

락창

· 13년 전 · 조회 2800 2800

링크

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에서 해주시기 바랍니다.

글쓰기

번호	제목	글쓴이	날짜	조회
4952	홈페이지 제작계약서 v9.7.3 [16] #기획자 #계약서	해피정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	7997
4951	사이트맵 [11] #기획자 #기획서	해피정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	4529
4950	사이트제작순서 (참고) [10] #기획자 #기획서	해피정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	7696
4949	모바일/테블릿의 @font-face 지원여부 [2] #퍼블리셔 #css	전진 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1809
4948	계층형 카테고리를 여러개 선택할수 있게 하는방법이 없을까요?? #개발자 #javascript	김준수사랑 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1238
4947	슬라이드 업 전체메뉴에 대해 질문드립니다. [2] #개발자 #jquery	darllim 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2730
4946	제가쓰는 데이터 백업 스크립트 #개발자 #os	슬픈외로움 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1370
4945	모바일에서 파일이첨부되지 않아요 [2] #개발자 #os	프로프리랜서 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1097
4944	mysql like 검색방법 [9] #개발자 #mysql	프로프리랜서 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	4613
4943	웹접근성이란? [3] #퍼블리셔 #웹접근성	프로프리랜서 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1580
4942	자바스크립트를 이용해서 모바일에 selet 박스 구현한것입니다 [4] #개발자 #javascript	프로프리랜서 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	943
4941	jquery로 펼침 메뉴 입니다. [7] #개발자 #jquery	프로프리랜서 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3743
4940	PHP변수를 스크립트로 쓸때 [5] #개발자 #php	프로프리랜서 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	932
4939	웹표준형 화면 확대/축소 [8] #퍼블리셔 #웹접근성	돼지코구뇽 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	4524
4938	그누보드 설치시 첫번째 MYSQL 정보 입력이 자꾸 어긋나요.... #개발자 #mysql	새와바람 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	815
4937	끊기지 않는 세션을 만들려면 어떻게? [13] #개발자 #mobile	지러유 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	8687
4936	[툴팁] 성능을 고려해서 jquery 와 자바스크립트를 잘 선택해서 사용해야합니다. [6] #개발자 #javascript	시누이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2481
4935	프로그램 UI 저작권 문의드려요 [3] #디자이너	김석준9 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	3001
4934	익스플로러에서 CSS3의 컬러속성을 필터로 사용하도록 변경해주는 사이트 #퍼블리셔 #css	port 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1634
4933	csv 편집 방법? [3] #개발자 #mysql	지러유 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1912
4932	크롬 확장 프로그램 - secure shell [3] #개발자 #기타	프로맘보 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2005
4931	특정 폴터 압축하여 보관하기 [7] #개발자 #os	프로프리랜서 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1076
4930	파일에서 특정 단어 찾아내기 [9] #개발자 #os	프로프리랜서 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	1266
4929	자바스크립트 해킹 공격에 대한 방어 [3] #개발자 #javascript	시누이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	2315
4928	php 스크립트로 간단히 mysql 백업하기 [5] #개발자 #php	흥힝힝 프로필 보기 이 회원 글보기 이 회원의 댓글보기	12년 전	4316