Как разместить элемент (выпадающий элемент меню) точно под родительским меню

Question

Я пытаюсь разместить пункт выпадающего меню под родительским меню.При наведении указателя мыши на родительское меню видимость дочернего выпадающего меню станет видимой.

Я позиционировал дочерние элементы, используя position: absolute и используя top и left.

Но когда я меняю разрешение монитора, изменяется выравнивание левого и верхнего

Какпозиционировать этот элемент.Пожалуйста, помогите любая помощь будет оценена

Answer 1

A List Apart имеет замечательную, если не старую, статью обо всех тонкостях выпадающих меню css, с небольшим 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 для отображения подменю.