CSS在ul中获得额外的填充

Question

我正在尝试使用ul制作下拉列表position:absolute;。我可以通过向其父级添加position: relative;并将position: absolute;添加到right: 0;来成功删除它本身，z-index:999;与ul，因此它与所有内容重叠。

但不幸的是，我在li内得到了随机的额外填充。

img http://gyazo.com/25629ee8c2739ab360703ec43eefa3ee.png

你看，ul有红色背景，ul有绿色背景。 您可以看到顶部有大约10到15px的填充。

当我创建我的CodePen时，我不得不复制/粘贴整个容器以使这个bug在这里工作，这意味着它不是ul本身，而是在{{1}}导致它，但我不确定为什么，我已经检查了几次。

有一个实时的CodePen示例：http://codepen.io/anon/pen/Dohpn

我做错了什么？

Answer 1

您强迫您的第一个li元素从ul元素的顶部显示15px并带有margin-top。

取出

#filtersContent section ul li {
    margin-top: 5px;
}
#filtersContent section ul li:first-child {
    margin-top: 15px;
}

Updated CodePen

Answer 2

您需要从#filtersContent section ul li和filtersContent section ul li:first-child删除保证金。

您为这些设置的margin-top正在增加额外的空间。

修改：查看如何使用Chrome developer tools和Firebug for firefox。这些工具可以比猜测和检查更容易追踪这些东西！

Answer 3

您可以删除以下样式。这是工作代码http://codepen.io/anon/pen/amoFh

/*#filtersContent section ul li {
    margin-top: 5px;
}
#filtersContent section ul li:first-child {
    margin-top: 5px;
}*/