How to add a delay to javascript dropdown menu

Olop_Ocram
Tourist
11 0 2

please see our website at www.motionrc.com.  When you hover over "RC Models" it will show you a sub-menu of "RC Airplanes", "RC Boats", etc.  As you mouse over these sub menus items you will notice that the collection thumbnail images appear to the right of the sub-menu.  The problem we are encountering is when someone hovers over "RC Airplanes" (as an example) and then moves their mouse right, there is a chance they will trigger the "RC Boats" menu inadvertently.  To help avoid this, we have seen other sites add a very slight delay in the javascript so when you move your mouse from "RC Airplanes" to "RC Boats" there is a .5 second delay before the sub-menu changes and the collection images appear on the right. An example website is homedepot.com, when you go to their homepage and hover over "All Products" you will notice a .5 second delay as you move your mouse down from Appliances to Bath to Blinds, etc. We want this exact delay functionality. 

We are using the Debut theme with a custom dropdown mega menu.  Also, I am 90% certain this cannot be done with CSS because .js controls the deployment of the actual menu items.  If anyone can help give us advice on what code to edit in theme.js to accomplish this change it would be greatly appreciated.

Thank you,

Mark
Motion RC

Replies 0 (0)