I'm currently developing a jQuery/CSS dropdown menu for a website, and everything is functioning well except for one issue. When navigating between sub-menu items, the text color of the selected main menu item briefly changes because of the CSS border style I applied. It's a minor glitch, but it's been bothering me for quite some time! I want to retain the border that separates the submenus while eliminating this flash effect. Is there a way to implement a timer to address this problem? Alternatively, could I modify the border so that it remains inside the box? Any assistance would be greatly appreciated!
For reference, here is the code on jsfiddle: http://jsfiddle.net/BLvKK/1/
Note: I realize that using the CSS :hover property instead of triggering rollovers through jQuery would be more efficient. However, I opted for jQuery during testing.
Below is the HTML code:
[HTML CODE GOES HERE]The corresponding CSS is as follows:
[CSS CODE GOES HERE]And here is the jQuery script:
[JQUERY SCRIPT GOES HERE]Your help is much appreciated!