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

Question

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

Я позиционировал дочерние элементы, используя положение: абсолютное и используя верхний и левый.

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

Как расположить этот элемент. Plz помочь любая помощь будет оценена

Answer 1

A List Apart имеет замечательный, если старый, article на всех тонкостях css выпадающих меню, с помощью всего лишь небольшого javascript для исправления IE. Я считаю, что все CSS все еще отлично работает, но я не могу говорить с JS по-прежнему актуальным.

Answer 2

Try обернуть меню и подменю для родительского сНу элемента и просто скрыть/отобразить подменю, когда это необходимо:

<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 для отображения подменю.