html - CSS dropdown issue - drops when mouse is under it?

Question

I've been busting my head at this for quite some time now and I can't figure it out for the life of me.

Basically, I have the following site: http://tuivirtual.com/en/

If you move your mouse at the top portion of the banner images you'll notice that the dropdown menu drops but it shouldn't. It should drop only when hovered over the actual

tags, not below.

Any help is more than welcome!

Thanks!

Answer 1

A simple solution is to give the ".sub-nav-wrapper" a negative "z-index" and on hover to add a positive "z-index" to it.

#navigation li .sub-nav-wrapper {
z-index: -1;}

#navigation li:hover .sub-nav-wrapper {
z-index: 10;}

This will do the trick and it will keep the transition.

Answer 2

The element is still 'there', it just has an opacity of 0:

#navigation li .sub-nav-wrapper {   
    opacity: 0;
}

#navigation li:hover .sub-nav-wrapper {
    opacity: 1;
}

To solve this problem, hide it in some other way.

Answer 3

Try add this CSS code:

ul#navigation li div.sub-nav-wrapper {
    display: none;
}
ul#navigation li:hover div.sub-nav-wrapper {
    display: 1;
}

That should do it.