Submenu doesn't disappear when cursor is moved away.

The problem is that my 3rd level submenu doesn't disappear when I move the cursor away from it.

My site: http://www.col-b.uk/test/?page=menu

The first menu (Home, About Us, Teams, Stats etc.) is the menu I am working on, with the styling removed.

The second one, About Us and Teams, is a simplified version for testing.

The third one (page,1, page 2)  is taken straight from this tutorial without any changes. I am using the technique taken from here: http://code.iamkate.com/javascript/touch-friendly-drop-down-menus/

If you hover over "Teams" and then hover over any team, you get a list of seasons appearing.  When you move the cursor away from that list and move the cursor back to "Teams", that submenu remains visible (screenshot attached).

I am not getting consistent results from either the second or third menus; sometimes the submenu disappears, other times not.  I have not touched the CSS Dropdown.css.

The technique uses JavaScript but it is supposed to work without it.  I attach it anyway.

By the way, I take it I should be bothered about this???  It's just bugging me!

There is no comments box or contact on the tutorial page.

Any help appreciated as always!

  Col
Capture.JPG
Dropdown.css
Dropdown.src.js
LVL 3
colinspursAsked:
Who is Participating?
 
David S.Commented:
The submenus not hiding is a feature of the menu script you're using. Since you don't like it, try reducing the value for "DELAY".

It's strange that it shows "0 views". It seems the counter might be broken somehow.
1
 
colinspursAuthor Commented:
Not a single view after nearly 24 hours?  What's happened to EE??
0
 
Julian HansenCommented:
I am not sure I see the problem.

I will say that using JavaScript for this type of thing is asking for trouble in my opinion. A nested sub-menu is possible using only CSS.

Based on the page you have provided though I don't see anything odd with the menu - it appears to operate as it should - what is it I should be looking for?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
colinspursAuthor Commented:
screen grab of the issue
The red dot is the cursor, sub-page 2.2.1 etc should not be visible now.

The js is apparently not necessary, it should work with CSS only.

All this is because my menu on the live site won't work with touch devices as it depends on :hover and I'm looking for an alternative approach.

Col

PS the 0 views at the top of the question seems to be incorrect!
0
 
Julian HansenCommented:
That is a side effect of using JavaScript - if you move your mouse quickly enough it looses the event and does not close the menu.

Personally I avoid any menu that uses a JavaScript solution for this reason.

CSS effects do not suffer from this side effect.
1
 
colinspursAuthor Commented:
I have removed the javascript altogether and this issue is solved, but presumably the menu doesn't work on a touch device without it.

Shall I ask another question asking for multi-level menus that work from CSS only?
0
 
David S.Commented:
To add touch support without JavaScript, two techniques come to mind. The first is the hidden checkbox trick (with a selector like "input:checked~ul") and the second is using ":target", with an extra link to hide the open menu. Both techniques are complicated and need unusual changes to the HTML.

Why do you have an all or nothing attitude about that JS script? Why not just comment out the parts that add the mouseover and mouseout event handlers?

Julian, which technique do you prefer?
0
 
colinspursAuthor Commented:
Funnily enough I'm using the hidden checkbox trick on the live site http://www.fobgfc.org/

Must have cocked it up somehow.
0
 
Julian HansenCommented:
That would be the best option in terms of getting the best exposure for the question.
1
 
colinspursAuthor Commented:
You mean this Julian?

Shall I ask another question asking for multi-level menus that work from CSS only?
0
 
Julian HansenCommented:
Yup
0
 
colinspursAuthor Commented:
Thanks guys.  Will open a separate more general question.
0
 
Julian HansenCommented:
@David,

Apologies - did not see your question.

The checkbox trick is for sticky menus - click a menu and it stays open when the mouse moves away.

Hover menus require only a hover pseudo class to achieve the desired effect.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.