menu with sub menu including links, images using jquery and slideToggle

Question

On my website I have a menu with 4 items, they are inside a list (ul / li). then I have 4 divs. Each divs contains images, links, texts, and have to be 100% width.

When mouseover the 1st item of my menu, I want to display the 1st div using slideToggle, (because I want my "content" divs to scroll down) and when the div is displayed, then being able to navigate inside the div without the div to disappear again. When Mouseover inside the div, the div SlideToggle back...

I know how to do it with the click function, as the div remains open, but I'm looking for a solution using slideToggle.

here is my HTML :

<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>

my Jquery :

$("#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();
    }
);

my 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}

here is a Jsfiddle link to see it in action :

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

I think I started with using a wrong method but I can't find how to achieve this hope someone can help me with this !

thanks a lot

Answer 1

目前，您仅使用悬停功能定位li，并且由于您坚持使用滑动开关，因此只要不悬停一个li，将其向上滑动是正常的，为此，您需要在ul被悬停，然后仅在li被悬停时才显示不同的内容。