absolute element changes position when display set to none

[sani79]

this is a menu(archive_parent)/ submenu code and it looks fine as it is \[code\] .archive_parent{ position: relative; } .archive_ul { position: absolute; margin-top: 29px; padding: 0px; } <ul> <li class="archive_parent"><a href="http://stackoverflow.com/questions/13852447/#" >show archive</a> <ul class="archive_ul "> <li>1</li> </ul> </li> </ul>\[/code\]so every thing is in the right position ( submenu is exactly under menu)but i want to make submenu inadvisable and make it visible by clicking on the menubut problem is when i make submenu (\[code\]archive_ul\[/code\]) hidden (\[code\]display:none;\[/code\]) the position of submenu completely changes and i t appears at the left corner of page