jQuery 드롭 다운 메뉴 모든 링크 표시

Question

모든 링크가 표시되는 (레벨 3 단계) http://www.macheesmo.com/ (요리법)과 같은 메뉴를 만들고 싶습니다. http://jsfiddle.net/MZxeA/

내 문제는 내가 3 UL, 전체 서브 메뉴 사라져을 떠날 때마다입니다 -

이것은 내가 지금까지 왔어요 원하든입니다.

또 다른 문제는 두 번째 ul을 입력 한 다음 첫 번째 ul로 돌아 가면 세 번째 ul이 사라진다는 것입니다.

선택기와 관련된 또 다른 문제는 a를 제거하지 않으면 작동하지 않습니다.

내가 포함시키고 싶은 이유는 호버/트레일에 "온"스타일을 갖는 것입니다.

$(function() { 
    $(".main-nav ol li a").hover(function() { 
     $(this).addClass("hover"); 
     $('ul', this).css({ 
      'visibility': 'visible' 
     }); 
    }, function() { 
     $(this).removeClass("hover"); 
     $('ul', this).css({ 
      'visibility': 'hidden' 
     }); 
    }); 
}); 

도움을 주시면 감사하겠습니다. 당신이 jsfiddle에서 무엇을

Answer 1

내가 코드에서 JQuery와 파일을 포함 할 필요가 우선 1

1. 하여 1로 문제를 해결하려고합니다 몇 가지 실수와 함께. jquery 도움말을 사용하여 코드를 작성하십시오. JQuery와 파일을 포함 당신은 당신이 하위 메뉴의 위치가 절대 할 필요가 지역 JQuery와의 파일이 코드

<script src="local/jquery.min.js" /> 

1. 를 사용할 수 있습니다. 그리고 li는 그를 위치 잡는다 : 친척. 그와 관련된 아빠를 만들고, 당신이 원하는 것처럼 당신의 하위 메뉴를 당신의 진정한 장소에 놓습니다.

2. 보이는 옵션에서 사용할 몇 가지 문제가 있습니다. 하위 메뉴의 jquery는 예를 들어 show() 및 hide() 옵션. 이 코드에 당신은 일을 할 짧고 더 나은 코드를 볼 수 있습니다

$(function() { 
    $(".main-nav ol li a").hover(function() { 
     $(this).addClass("hover"); 
     $(this).next('ul').show(); 
    }, function() { 
     $(this).removeClass("hover"); 
     $(this).next('ul').hide(); 
    }); 
}); 

당신이 할 수있는 당신은 또한 페이드 아웃()와 fadeIn와 쇼()와 숨기기()를 교체하려고합니다()을 사용하여 전환을 수행하십시오. 기쁜에서

은 (당신이하는 복사하려고하는 예를 들어 사이트 등) CSS를 사용

Answer 2

바와 같이 코멘트에서이 작업을 수행하는 방법 그것에서 자바 스크립트를 떠나야하는 것입니다 지적 도움이됩니다.

기본적으로 수준 1 만 표시되는 수준 1-3의 중첩 목록이 세 개 있습니다. 이 스타일이 작동하는 방법의 장난감 예입니다

HTML :

<ul id="menu"> 
    <li> 
    <a href="#">Item 1</a> 
    <ul> 
     <li> 
     Sub item1 
     <ul> 
      <li>Third level items go here</li> 
     </ul> 
     </li> 
     <li>Sub item without third level items..</li> 
    </ul> 
    </li> 
    <li><a href="#">Item 2, no submenu</a></li> 
</ul> 

CSS :

/* Hide the submenu by default */ 
#menu > li > ul { 
    display:none; 
} 

/* Show on parent hover */ 
#menu > li:hover > ul { 
    display:block; 
} 

이제는이의 쇼 숨기기 부분을 보여주는, 아주 기본적인 HTML/CSS입니다 운동,하지만 나머지는 어쨌든 질문에 정말로 관련이 없습니다.심지어

이

$(document).ready(function(){ 
    $('#menu > li').hover(function(){ 
    $(this).children('ul').show(); 
    }, function(){ 
    $(this).children('ul').hide(); 
    }); 
});