绝对定位Div异常：添加<a>标签后菜单容器偏移至屏幕左侧求助

原因 #

你大概率是给第四项加<a>标签时，不小心把包裹第四项的绝对定位容器嵌套到了第三项的<a>标签里面。因为<a>标签默认是行内元素，没有设置position:relative，这时候绝对定位的容器会失去原有的定位参考（原本是第三项的relative定位），转而相对于整个视口定位，所以就跑到屏幕最左侧了。

另外还有一种小概率情况：如果第三项本身是行内/行内块元素，加了<a>后没给第三项设置固定宽度，导致第三项宽度收缩，但这种情况不会直接跑到屏幕最左，更多是下拉菜单宽度异常。

解决办法 #

• 修正DOM结构：确保绝对定位的下拉容器是第三项（设置了position:relative的那个元素）的直接子元素，不要嵌套在第三项的<a>标签里。比如正确结构应该是：

<li class="menu-item has-submenu" style="position:relative;">
  <a href="#">第三项</a>
  <div class="submenu" style="position:absolute; left:0; top:100%;">
    <a href="#">第四项</a>
  </div>
</li>

• 给下拉容器设置宽度：为了让下拉菜单和第三项宽度一致，可以给.submenu加width:100%;，避免因为<a>标签的默认样式导致宽度异常。
• 确保第三项的定位上下文有效：确认第三项的position:relative没有被其他样式覆盖，建议把第三项的display设为inline-block，既能保持横向排列，又能支持宽度和定位属性。

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