我想要创建一个类似于亚马逊的超级菜单，使用斜对角的鼠标移动，但仅限于CSS。 我已成功实现了右上角的对角线移动，但无法使右下角移动正常工作。
下面是描述问题的图像：
更新：旨在通过允许用户进行对角线移动，从而使用户更加友好，而不仅限制在父级矩形内部的移动。
好吧，让我们这样尝试：当您的鼠标光标恰好位于数字3上时，您进行快速的对角线移动，就像绿线一样，Parent 2不会被触发，并且右侧正确显示3333。 但是，如果您沿着红线方向移动，则会触发Parent 4，并且在右侧我们将看到4444而不是3333...
我已通过向子菜单添加以下过渡来实现右上移动：
visibility: hidden;
transition: visibility 280ms ease-in;
然而，向右下方移动鼠标会忽略该转换并立即触发下一个父类别的悬停状态。
这是我迄今为止所做的演示:
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>我不想使用任何JavaScript解决方案。是否可能仅使用CSS实现？