CSS dropdown appearing too quickly in IE

Question

I have created a CSS dropdown menu using suckerfish. The problem with it is when you click the top level nav item that takes you to category pages, the pointer is still over that nav item and the dropdown appears automatically in IE.

Its fine for Firefox as the dropdown will not appear until I move the mouse, however IE just kicks in straight away without any mouse movement at all.

As the menus are quite large the user is unaware that the page has changed underneeth.

This site http://www.foodnetwork.com/ seems to achieve what I want, with a slight delay before the dropdown appears again. I know they are mixing it up with JS and CSS, but cant quite work out what they are doing.

Any thoughts

Answer 1

Use jQuery's hoverIntent to achieve that delayed effect. In addition, the menu stays there even if the cursor momentarily moves out of the menu. Prevents that distracting flicker effect of menus appearing and disappearing.

Answer 2

Just throwing this out there, since there may be other changes you wish the menu had as well:

You may want to consider Superfish (an updated/upgraded [and possibly overkill so take a look] version of Suckerfish), one of the additions is the delay option on the menus.

Answer 3

So I got the solution for this.

I added the CSS with JS in the head of the document and set a small delay on it. This way when the user clicks the main nav link the dropdown is hidden by default with the CSS and then made to reveal with the CSS that is written in with JS. The user sees a page without the drodown on page load, and then after 1.5 secs the dropdown appears, therefore showing the user the page reloaded.

// Add dropdown styles
        function addDDStyles() {
            var head = document.getElementsByTagName('head')[0];
            var logindiv = document.createElement('link');
            logindiv.setAttribute('type', 'text/css')
            logindiv.setAttribute("rel", "stylesheet");
            logindiv.setAttribute("href", 'http://files.stv.claw/css/dropdown.css');
            logindiv.setAttribute("media", "screen");
            head.appendChild(logindiv);
        }
        setTimeout('addDDStyles()', 1500)

Answer 4

I know you are currently using a different technological solution to this problem, but please at least take a look at my suggestion before you judge it. I'm not good enough to explain it outright, so I'll just give you a couple of bullet points and then link to the solution in an effort to assist you.

This solution contains these attributes:

• No client-side scripting of any sort (Javascript) was used
• Absolute browser and platform compatibility
• Text scaling friendly
• Narrow window width handling
• Functional for non-CSS, or CSS-disabled, browser
• Placed into the Public Domain

The site where the file is posted uses this menu (it's owned by the writer). So, please visit this GRC's Script-Free Pure-CSS Menuing System page.

I really hope this helps you!!