How to position a element (drop down menu item) exactly below the parent menu

Question

I am trying to place a dropdown menu item below the parent menu. When u hover on the parent menu, the child dropdown menu item's visibility will turn visible.

I positioned the child elements using position:absolute and using top and left.

But when i change the resolution of the monitor the left and top alignment changes

How to position that element. Plz help any help will be appreciated

Answer 1

Try to wrap the menu and submenu to a parent div element and just hide/show the submenu when needed:

<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>

The css:

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

Please note that the CSS won't work in IE, you will need to use JS to display the submenu.

Answer 2

A List Apart has a wonderful, if old, article on all the intricacies of css drop down menus, with just a little javascript to fix IE. I believe all the CSS still works great, but I can't speak to the JS still being relevant.