列表项与 anchor tag]之间的菜单中不一致的交互作用> 为什么“菜单项2”中的下拉菜单ul没有完全与其父级li元素的顶部对齐？将下拉列表ul CSS设置为： position:absolute; top:0; left:0; 我希望它从父元素的左上角开始覆盖，即完全覆盖它。一些令人困惑的症状：我希望父菜单可单击，并且在某些情况下具有下拉菜单。因此，在有下拉菜单的地方，父菜单<li>具有填充的<a>以增加可点击区域。由于<li>显示相同的填充区域，因此这也增加了包含的li:hover。这可以按需工作。但是，当显示下拉列表并与<li>对齐时，<li>似乎位于之前的位置，它已被<a>展开。当我在浏览器（Chrome和Firefox）中签入时，<li>元素实际上并未填充与<a>相同的空间，因此下拉列表显示了一些[ 我想要的位置。我知道我可以在绝对位置的下拉列表中使用top：SOME_NEGATIVE_OFFSET，但这感觉很hacky，我想了解发生了什么？这是我的第一篇文章，请对我轻松一点：） <!DOCTYPE html> <html> <head> <title>DropDownTest</title> <style> ul{ list-style:none; margin:0; padding:0; } li{ display:block; position:relative; } li>a{ padding:1rem; background-color:grey; } li>a:hover{ background-color:lightgray; } .mainbar>li{ float:left; } li.hasDrop:hover>ul{ display:block; } .dropContent{ display:none; position:absolute; top:0; /*not working as expected*/ left:0; margin:0;/*thought this might have helped but no*/ padding:0; z-index:1; list-style:none; min-width:100%; } .dropContent>li>a{ display:block; } </style> </head> <body> <div> <ul class="mainbar"> <li><a href="#">Menu Item 1</a></li> <li class="hasDrop"> <a href="#">Menu Item 2</a> <ul class="dropContent"> <li><a href="#">Sub 1</a></li> <li><a href="#">Sub 2</a></li> <li><a href="#">Sub 3</a></li> </ul> </li> <li><a href="#">Menu Item 3</a></li> </ul> </div> </body> </html> 为什么“菜单项2”中的下拉列表ul不能完全与其父li元素的顶部对齐？将下拉列表ul CSS设置为：position：absolute;顶：0;左：0;我希望它是... - html - SO中文参考