Using JavaScript to adjust the top of a flyout submenu

JavaScript
1

Hello! Please take a look at my site:

Test Flyout Lists

As I hover over Item 15, I want it to be like, “Okay, this list I’m about to display is going to be too long, so let’s disregard the ‘top: 10px’ line in the CSS and instead 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. Can I do this in JavaScript?

2

If you wanted a CSS only solution the you could add a class to that last item and then set the nested ul to be bottom:0 and top:auto.

e.g.


<li class="has_children [B]lastul[/B]"><a href="#">Item 15</a>




#navigation ul li.lastul ul {top:auto;bottom:0}

Of course that assumes that the structure remains the same as you have shown.