如何将元素(下拉菜单项)放置在父菜单的正下方

Question

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

我使用position:absolute和top和left对子元素进行了定位。

但是当我改变监视器的分辨率时，左对齐和顶部对齐就会发生变化

如何定位该元素。如有任何帮助，我们将不胜感激

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