Hi,

 

I'm a newbie to jquery, very much interested to learn it.

 

Trying to write an accordion menu ( mouseover menu expand) with multiple submenus, and the structure is built at runtime. Problem: I see the menu created good, but when hover on submenu to see further submenu items, it collapses the parent menu.

 

I basically trying to write something like this (but on hover) - http://blog.evaria.com/wp-content/themes/blogvaria/jquery/index-multi.php

 

For instance, when hover on 'Discounts' the menu expands good. But it collapses the parent ('Discounts') menu when hover on 'Child2', where i expect that to expand and show further child items 'Child2.1a'.

 

/* Attached the css content*/

 

<!-- Accordion html ul li structure -->

<ul id='MainMenu'><li> <h3 class='head'>Market</h3><ul><li><a href=../Market/Apple>Apple</a></li><li> <h3 class='head'>Discounts</h3> <ul> <li><ul id='xtraMenu'> <li> <h4 class='head'> </h4> <ul><li><a href=../Child1/Child1>Child1</a></li><li> <h3 class='head'>Child2</h3> <ul> <li><ul id='xtraMenu'> <li> <h4 class='head'> </h4> <ul><li><a href=../Child2.1a/Child2.1a>Child2.1a</a></li></ul></li></ul> </li></ul> </li></ul></li></ul> </li></ul> </li></ul></li><li> <h3 class='head'>Setup </h3><ul><li><a href=../Setup/Byte>Byte</a></li></ul></li></ul>

 

// JQuery

$( "#MainMenu").accordion({
                            header: 'h3.head',
                                    active: 'h3.selected',
                                    navigation: true,
                                    event: "mouseover", 
                                    autoHeight: false,
                            alwaysOpen: false,
                            animated: true});

        $("#xtraMenu").accordion({
        header: 'h4.head',
                active: 'h4.selected',
                navigation: true,
                event: "mouseover", 
                autoHeight: false,
        alwaysOpen: false,
        animated: true
        });

 

Your help is much appreciated

 

Thanks