Fly out menu also operates in drop down list

Hi,
Here is a page for example http://www.theremotedoctor.co.uk/index.html
Please use Keys & Remotes.
Looking down the list you will see HONDA.
When HONDA is selected a fly out menu is then shown to the right & then the HONDA car models are shown in a drop down list.

The problem that i see is that this fly out menu is also shown vertically when you select any of the other options Audi Fiat etc etc.
If you were to currently see,Audi,Bmw,Fiat,Ford etc etc then select HONDA you will notice a ripple pass down the list & the HONDA car models will overwrite etc the likes of Jaguar,Land Rover,Lexus.

I was using Firefox F12 to inspect element but looking at Chrome F12 much more is shown but didnt give me the answer to this bugging issue that i have.

Many Thanks.

I couldn't edit the javascript on the HTML file but it seems like this is what it is reading:

Code:

---

$("li:has(ul)").click(function() {
            $("ul", this).slideDown();
        });

---

Maybe try this:

Code:

---

$("li:has(ul)").on({
click:function() {
            $("ul", this).slideDown();
},
onmouseleave:function(){
$("ul", this).slideUp();
}
        });

---

Hi,
Thanks for the advice but it has the same affect.

Ok,
Ive found the issue & now corrected.
From another post there was no top or bottom border when my Honda fly oue menu was in action.
The following code was added.

Code:

---

        .sub-menu {
    top:-2px!important;
    border-top:2px solid #000000;
    border-bottom:2px solid #000000;

---

Ive now removed the !important and now issue has been fixed.

However,i then added your code from above but change it from onclick to onmouseover & looks even greater.

Thanks very much.

Hi,
Spoke to soon.
As mentioned above I changed on click to onmouseover then when you scroll over Honda there is no need to click it as the fly out menu no pops out, which is great.

What isn't great, and only just noticed is that the items for sale are not loaded after item selection has been made.
Take this page for example http://www.theremotedoctor.co.uk/acc...llto=selection

You select FLIP REMOTE KEY PAD on the right & the image is supposed to load where The Remote Doctor is.
This now doesn't happen as the on click was changed.
I can put the original code back for it to load but would then need to click HONDA for the fly out menu to be shown "under Keys & Remotes"
So could you advise please what code is needed to have the on click to load the images & also the onmouseover to allow the HONDA fly out menu to work without clicking it.
I'm able to get one or the other to work but not both.
Not really knowing this code just kept given me syntax errors.

Thanks

Hello,
Ive now put the code back as it was to start with.
Everything is now working as it should be.
So to continue with this post if you look here please http://www.theremotedoctor.co.uk/acc...llto=selection
Hover over Keys & Remotes then scroll down to HONDA.
Attached to HONDA is a fly out menu which will be shown only if HONDA is clicked.
Now i would like it to fly out onmouseover.

I did changed the jQuery and it worked great but i then lost the onclick function for my item selection on the site.
Could you advise how i can get this onmouseover to operate the fly out as im unsure how to now complete it.

Thanks very much.

Checking the code again ive sorted it.