Diagonal movement and CSS only transition delays

Question

I want to create Amazon like mega menu with diagonal mouse movement, but with CSS only. I've succeeded with top-right diagonal movement, but can't get bottom-right movement working.

Here is an image describing the problem:

Update: the idea is to be more user friendly by allowing user to move his mouse diagonally and not to restrict the movement only inside Parent's rectangle.

Ok, let's try this way: when your mouse cursor is exactly on number 3, then you make a QUICK diagonal movement just like the green line, Parent 2 is not triggered and 3333 are correctly shown on the right side. However if you move over the red line direction Parent 4 is triggered and on right side we see 4444 instead of 3333...

I have accomplished top-right movement by adding the following transition to the sub menu:

visibility: hidden;
transition: visibility 280ms ease-in;

However moving the mouse in bottom-right direction somehow ignores this transition and instantly triggers hover on next parent category.

Demo of what I have done so far:

ul{
    padding: 0;
    background-color: #eee;
    position: relative;
}
ul > li{
    list-style: none;
    width: 205px;
}
ul > li > a{
    display: block;
    padding: 9px 15px;
    box-sizing: border-box;
    border-right: 1px solid #E1E3DF;
    transition: all 280ms ease-in;
    position: relative;
    text-decoration: none;
    color: #000;
}
ul > li:hover > a{
    background-color: #E5F4F7;
    color: #34A8C4;
}
ul > li > nav{
    position: absolute;
    padding: 15px;
    right: 0;
    top: 0;
    bottom: 0;
    left: 205px;
    overflow: hidden;
    background-color: #E5F4F7;

    /* Transition magic here*/
    visibility: hidden;
    transition: visibility 280ms ease-in;
}
ul > li:hover > nav{
    visibility: visible;
}

<ul>
    <li>
        <a href="" title="">Parent category 1</a>
        <nav>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 2</a>
        <nav>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 3</a>
        <nav>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 4</a>
        <nav>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 5</a>
        <nav>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 6</a>
        <nav>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 7</a>
        <nav>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 8</a>
        <nav>
            88888888<br/>
            88888888<br/>
            88888888<br/>
            88888888<br/>
            88888888<br/>
            88888888<br/>
            88888888<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 9</a>
        <nav>
            99999999<br/>
            99999999<br/>
            99999999<br/>
            99999999<br/>
            99999999<br/>
            99999999<br/>
            99999999<br/>
        </nav>
    </li>         
</ul>

Added the above snippet code to Jsfiddle also in case someone prefers it: https://jsfiddle.net/nikimihaylov/9ydrhk30/

Please note:

I do not want to use any Javascript solutions. Is it possible to achieve this with CSS only?

Answer 1

You could add a transition delay to the right side nav element.

ul > li:hover > nav{
    visibility: visible;
    transition-delay: 280ms;
}

jsFiddle

ul{
    padding: 0;
    background-color: #eee;
    position: relative;
}
ul > li{
    list-style: none;
    width: 205px;
}
ul > li > a{
    display: block;
    padding: 9px 15px;
    box-sizing: border-box;
    border-right: 1px solid #E1E3DF;
    transition: all 280ms ease-in;
    position: relative;
    text-decoration: none;
    color: #000;
}
ul > li:hover > a{
    background-color: #E5F4F7;
    color: #34A8C4;
}
ul > li > nav{
    position: absolute;
    padding: 15px;
    right: 0;
    top: 0;
    bottom: 0;
    left: 205px;
    overflow: hidden;
    background-color: #E5F4F7;

    /* Transition magic here*/
    visibility: hidden;
    transition: visibility 280ms ease-in;
}
ul > li:hover > nav{
    visibility: visible;
    transition-delay: 280ms;
}

<ul>
    <li>
        <a href="" title="">Parent category 1</a>
        <nav>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
            11111111<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 2</a>
        <nav>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
            22222222<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 3</a>
        <nav>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
            33333333<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 4</a>
        <nav>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
            44444444<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 5</a>
        <nav>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
            55555555<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 6</a>
        <nav>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
            66666666<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 7</a>
        <nav>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
            77777777<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 8</a>
        <nav>
            88888888<br/>
            88888888<br/>
            88888888<br/>
            88888888<br/>
            88888888<br/>
            88888888<br/>
            88888888<br/>
        </nav>
    </li> 
    <li>
        <a href="" title="">Parent category 9</a>
        <nav>
            99999999<br/>
            99999999<br/>
            99999999<br/>
            99999999<br/>
            99999999<br/>
            99999999<br/>
            99999999<br/>
        </nav>
    </li>         
</ul>