I want to create Amazon as a mega-menu with a diagonal mouse movement , but only with CSS . I succeeded in the correct diagonal movement, but I can not work with the lower right movement.
Here is an image describing the problem:
Update: The idea should be more user-friendly, allowing the user to move the mouse diagonally, and not restrict the movement only inside the parent rectangle.
Well, try this: when your mouse cursor is exactly on the 3rd, you make the dialog movement FAST , like a green line, parent 2 does not start and 3333 displays correctly on the right side. However, if you move along the red direction of the line, parent 4 starts, and on the right side we see 4444 instead of 3333 ...
I performed the upper right movement by adding the following transition to the submenu:
visibility: hidden; transition: visibility 280ms ease-in;
However, moving the mouse in the lower right direction somehow ignores this transition and instantly causes hovering to the next parent category.
Demonstration 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; 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>
The snippet code added above to Jsfiddle also in case someone prefers it: https://jsfiddle.net/nikimihaylov/9ydrhk30/
Note:
I do not want to use any Javascript solutions. Is it possible to achieve this only with CSS?
source share