Transparent-gradient menu

Question

I have a complex problem. I want to create a menu. At the same time just only 3 elements are visible, and 2 other, which are transparent-gradient. If I move the cursor in a transparent element, the list will scroll up or down. The menu menu have sub-levels, which have the same format as the main level.

Here is a sample:

When it stop, it's okay. The first, and last displaying element's CSS set linear-gradient. When it move, i use jquery to animate the moving. But the result is not exactly I want. When it scroll, it looks like the whole list is moving, not scrolling. I want to use jQuery just the move animation, and the transparent gradient set the whole list, not for the list element.

I guess I should use mask for the list, but the background is transparent too. I run out from ideas.

Answer 1

I solve it. I use "overflow:hidden" and svg mask. The sub-level is an other ul list, not include in the first level, and jquery set the display.