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

Vote count:

0

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://ift.tt/1zMu5D9

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

asked 40 secs ago

mmdwc

180

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