html - 在父级上方可视化地创建子菜单/下拉菜单

Question

我正在底部创建一个菜单 posititon:absolute; bottom:0 ，子菜单项应该完全显示在其父级之上，在本例中，所有 li应该出现在 ul 上方本身。

这完全可以通过 margin:<negative value> 来实现, 但是:像素数量由盒子本身的最上面的像素定义，而不是最新的 li元素。

因此:如果您有一个动态子菜单，就像我一样，具有固定的负边距，则放置在主上方的子菜单将无法正确显示，无论是在菜单本身之上还是在菜单本身之上。

我正在寻找解决方案。我正在考虑 3 个可能的选项，但我都不知道如何编码。
A. 负边距是计算到框的最底部像素的值(换句话说:在最后一个 li 元素的底部)。就像在 Photoshop 中一样，您可以专注于框的一个 Angular ，计算到该点的距离。
B. 类似于li:calc(<amount of list items * -23px + 20px) - 动态选项。也可以使用 jQuery`
C. 自己想的比较好的方案。 :)

谢谢!

附言我目前拥有的 JSfiddle，您可以看到我当前的设置并不是那么好用。 :) Here

Answer 1

试试这个 fiddle :

http://jsfiddle.net/LuuAb/2/

var a=$('#filters').scrollTop()+$('#filters').height();
$(".option-set").css({bottom:''+a+'px'});