I have a drop-down menu system which is steady as a rock using pure CSS.
I have added some jQuery so that the drop-down and slide-out movements are more gradual.
It works up to a point, but the slide-out menus are prone to disappear instantly when hovered, but this doesn’t always happen.
Depending on how the mouse pointer is moved, the slide-out menus will appear (they always do that), then when hovered they’ll disappear only to slide out again. At other times the entire drop-down menu just rolls up.
I’ve looked to see if there’s a tiny gap between the menus, but that’s not the problem (for testing I’ve even ensured they overlap by about 5px).
I’m using an almost* identical jQuery script on another site (www.holidaymull.co.uk), with no problems, so I imagine there’s some CSS/jQuery interaction here that is causing it.
- The only difference lies in the use of the <nav> element in the HTML for this site, and <div id=‘nav’> in Holiday Mull, and some dimensions.
I cannot work out why, and would be grateful for help, please.
A demonstration can be seen at: http://www.mull-bed-and-breakfast.co.uk/tests/demo1.php. This is the pure CSS version, and has a link to the jQuery version. The slide-out menus are under ‘Booking’ and ‘Travel’.