What to do when my sidebar list gets too long?

Hello! Please take a look at my site:

Test Flyout Lists

OK, I understand that the bottom of the gradient is going to be the bottom of the sidebar. So, as I hover over Item 15, I want to tell CSS “Okay, this list I’m about to display is going to be too long, so let’s disregard the “top: 10px” line and have the submenu sit with its last item right at the bottom aligned with the bottom of the gradient.” That way, we know for sure that the submenu will not reach past the height of the body, and the last item will be visible. The bottom of the last item’s cell should “hug” the bottom of the page/gradient. Does anybody know how to do this?

i dont actually understand your question, but I think i understand your goal.

I would suggest a different approach all together… 2/3 of the way into the list add a class to the base LI, <li class=“midpoint”>.

then you can use it as a point of reference, .midpoint~li :hover {bottom:10px; top:auto;}

hope that helps