为何position:absolute在DIV与UL/LI元素上表现不同？

核心原因是浏览器默认样式（user agent stylesheet） 的差异：<ul>和<li>作为列表元素，浏览器会给它们设置默认的内边距、外边距或列表项缩进，而<div>作为通用块级容器，默认没有这些额外间距样式。

比如主流浏览器的默认样式里，<ul>自带padding-left: 40px，<li>也会因列表标记（即使未显示）产生默认偏移。这些默认样式会改变父元素的内容区域起始位置，而绝对定位元素的参考点是父元素的内容边缘，最终导致UL/LI结构中的子菜单出现向右偏移；DIV结构没有这些默认间距，子菜单会紧贴父元素边缘上下排列。

解决方法 #

通过重置列表元素的默认样式，让两种结构表现一致：

ul, li {
  margin: 0;
  padding: 0;
  list-style: none; /* 移除列表标记，避免额外占位 */
}

添加这段代码后，UL/LI结构的子菜单就会和DIV结构的定位效果完全一致。

验证方式 #

你可以打开浏览器开发者工具（F12），查看ul和li的元素样式面板，能直接看到浏览器自带的padding/margin规则，这就是视觉差异的源头。

内容的提问来源于stack exchange，提问作者Rony