링크가 포함 된 하위 메뉴가있는 메뉴, jquery 및 slideToggle을 사용하는 이미지

Question

내 웹 사이트에는 4 개의 항목이있는 메뉴가 있으며 목록 (ul/li) 안에 있습니다. 다음 4 div가 있습니다. 각 div에는 이미지, 링크, 텍스트가 포함되어 있으며 너비는 100 % 여야합니다.

내 메뉴의 첫 번째 항목을 마우스 오버 할 때 slideToggle을 사용하여 첫 번째 항목을 표시하고 싶습니다. (내 "내용"div를 아래로 스크롤하기를 원하기 때문에) div가 표시되면 해당 항목을 탐색 할 수 있습니다. div가 없으면 div가 다시 사라집니다. div 안에 마우스 오버 할 때 div SlideToggle back ...

나는 div 함수가 열려 있기 때문에 click 함수로이를 수행하는 방법을 알고 있지만 slideToggle을 사용하는 솔루션을 찾고 있습니다.

<ul class="main_menu"> 
<li>ITEM 1</li> • <li>ITEM 2</li> • <li>ITEM 3</li> • <li>ITEM 4</li> 
</ul> 

<div id="main_sous_menu" class="bandeau_1"> 
sub Menu 1. Links & Images ... 
</div> 

<div id="main_sous_menu" class="bandeau_2"> 
sub Menu 2. Links & Images ... 
</div> 

<div id="main_sous_menu" class="bandeau_3"> 
sub Menu 3. Links & Images ... 
</div> 

<div id="main_sous_menu" class="bandeau_4"> 
sub Menu 4. Links & Images ... 
</div> 

<div class="content"> 
</div> 

내 JQuery와 : 여기

내 HTML입니다

$("#main_sous_menu.bandeau_1").hide(); 
$("#main_sous_menu.bandeau_2").hide(); 
$("#main_sous_menu.bandeau_3").hide(); 
$("#main_sous_menu.bandeau_4").hide(); 

$(".main_menu li:first-child").hover(
    function() { 
    $("#main_sous_menu.bandeau_1").slideToggle(); 
    } 
); 
$(".main_menu li:nth-child(2)").hover(
    function() { 
    $("#main_sous_menu.bandeau_2").slideToggle(); 
    } 
); 
$(".main_menu li:nth-child(3)").hover(
    function() { 
    $("#main_sous_menu.bandeau_3").slideToggle(); 
    } 
); 
$(".main_menu li:nth-child(4)").hover(
    function() { 
    $("#main_sous_menu.bandeau_4").slideToggle(); 
    } 
); 

내 CSS :

:

여기

.main_menu { 
    font-size: 25px; 
    text-align: center; 
    border-bottom: 1px solid #EEE; 
    padding: 5px 0px; 
} 

.main_menu li { 
    list-style: outside none none; 
    display: inline-block; 
    vertical-align: top; 
} 

.content{background-color:red;height:50px} 
#main_sous_menu { 
    padding-top: 10px; 
    width: 100%; 
    position: relative; 
height:200px; 
background-color:green} 

행동에서 볼 수있는 Jsfiddle 링크입니다

http://jsfiddle.net/xjmk1otu/1/

내가 잘못된 방법으로 시작했다고 생각하지만이 방법을 찾을 수 없습니다. 누군가가 나를 도와 줄 수 있기를 바랍니다.

덕분에 하나 개 리튬이가 다시 밀어하는 것이 정상 공중 선회되지 않을 때마다, 슬라이드 토글을 사용하여 주장이 호버 기능을하고 있기 때문에 단지 리를 대상으로하는이 시점에서 많은

Answer 1

에 이렇게하면 ul을 올렸을 때마다 슬라이드를 시작한 다음 li가 끌릴 때마다 다른 내용 만 표시해야합니다.