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

Question

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

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

但是当我更改显示器的分辨率时，左对齐和顶部对齐会发生变化

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

Answer 1

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

Answer 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来显示子菜单。