如何将元素（下拉菜单项）准确定位在父菜单下方答案

【问题标题】：How to position a element (drop down menu item) exactly below the parent menu如何将元素（下拉菜单项）准确定位在父菜单下方
【发布时间】：2010-07-29 00:55:57
【问题描述】：

我正在尝试在父菜单下方放置一个下拉菜单项。当您将鼠标悬停在父菜单上时，子下拉菜单项的可见性将变为可见。

我使用 position:absolute 和 top 和 left 定位子元素。

但是当我改变显示器的分辨率时，左对齐和上对齐会改变

如何定位该元素。请帮助任何帮助将不胜感激

【问题讨论】：

父母有position:relative吗？
不，它没有位置：相对

标签： php .net html css

【解决方案1】：

A List Apart 在所有复杂的 css 下拉菜单中都有一个很棒的 article article，只需一点 javascript 即可修复 IE。我相信所有的 CSS 仍然很好用，但我不能说 JS 仍然相关。

【讨论】：

【解决方案2】：

尝试将菜单和子菜单包装到父 div 元素中，并在需要时隐藏/显示子菜单：

<div id="container>
<div id="menu_item">This is a menu item</div>
<ul id="submenu">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
</div>

CSS：

#submenu { display: none; }
#menu_item:hover + #submenu { display: block; }

请注意，CSS 在 IE 中不起作用，您需要使用 JS 来显示子菜单。

【讨论】：

用你的html你可以做到#container:hover #submenu { display:block; } 是 IE兼容
它与 IE 不兼容，因为旧版 IE 不支持将鼠标悬停在以外的任何元素上。