在父级上方可视地创建子菜单/下拉列表

时间:2013-11-29 17:57:53

标签: html css drop-down-menu negative-number

我正在底部posititon:absolute; bottom:0创建一个菜单,其中的子菜单项完全显示在其父级之上,在这种情况下,所有li应显示在ul本身。

这可以通过margin:<negative value>完美实现,但是:像素数量由框本身的最高像素定义,而不是最新的li项。

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

我正在寻找解决方案。我正在考虑3个可能的选项,我不知道如何编码。
:一种。 负边距是计算到框中最底部像素的值(换句话说:在最后li项的底部)。就像在Photoshop中一样,您可以专注于盒子的角度,计算到该点的距离。
B。li:calc(<amount of list items * -23px + 20px)这样的东西 - 动态选项。也可以使用jQuery`
C。自己想出一个更好的解决方案。 :)

谢谢!

P.S。我目前拥有的JSfiddle,你看到我目前的设置并不是那么好用。 :) Here

1 个答案:

答案 0 :(得分:1)

试试这个小提琴:

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

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