How to add a hover delay on a menu for a Volusion site?

Question

First of all, I'm using Volusion. Here's my website: www.gtsimulators.com

So if you're familiar enough with it, you will know that it is pretty limited for customization. Here's the thing I'm having trouble to figure it out:

I need to add a slight delay of at least half a second (0.5) when the mouse hover over the categories menu (please check website), so the dropdown won't be triggered immediately when hovering over the menu. I know it can be made with CSS or Javascript. Either way will be good for me.

Further information: As I previously mentioned, I have limited to no access to edit files. I've found the JS file for the navigation here (/a/j/vnav.js) and I can't edit it. Also, here's the CSS file for the navigation (/a/c/vnav.css) and I can't edit it as well.

I do have access to the main html, css and js files.

I will be glad to provide more information if needed.

Please help. Thanks!

---

UPDATE:

First time I've asked a question via Stackoverflow and the result was awesome thanks to Adam K.

Just added this code into my CSS file and it worked perfectly:

.vnav__subnav, .overlay{
    transition: opacity 0.2s, max-height 99s;
    display: block!important;
    opacity: 0;
    pointer-events: none;
    max-height:0;
}

li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
    opacity: 1;
    pointer-events: auto;
    max-height:9999px;
    transition: opacity .5s, max-height 0s;
    transition-delay: .5s;
}

Again, thanks Adam for the prompt response.

Answer 1

Try something like this

(Defining the actual delay only for the :hover case will make only turning red delayed. Turning back black will be instant. If you want transition delayed both ways, simply set transition-delay only for default state.)

<style>
  a{
    color:black;
    transition:color 0s;
    transition-delay:0;
  }
  a:hover{
    color:red;
    transition-delay:0.5s;
  }
</style>

Well i wanted to show you generic usage.

You can inject this anywhere on your website. I don't think delay is really what you want to go for IMO. - Try this instead. (It works, already tried it in dev tools on your website)

<style>
.vnav__subnav, .overlay{
    transition: opacity .5s, max-height 99s;
    display: block!important;
    opacity: 0;
    pointer-events: none;
    max-height:0;
}
li:hover > .vnav__subnav,#display_menu_1:hover + .overlay{
    opacity: 1;
    pointer-events: auto;
    max-height:9999px;
    transition: opacity .5s, max-height 0s;
}
</style>

This will make submenus and overlay on your website appear smoothly without any changes in javascript or HTML. Just few lines of css is all it takes ;)