drop down div inside a parent with overflow set to hidden - html

Question

Ive got the following for the parent div:
#parent {
overflow: hidden;
}
And the following for the inner div which is a drop down div. When click to show, a part of the drop down which goes below the parent div, is not displayed (only half displayed).
#dropDown {
display: none;
position: absolute;
}
and here is my HTML code:
<div id='parent'>
<ul>
<li id="exportWrapper">
<button onclick="return false" id="triggerDropDown">trigger </button>
<div id="dropDown">
<span class="one"> link one</span><br>
<span class="two"> link two</span>
</div>
</li>
</ul>
</div>

Answer 1

I didn't see anything that called the #dropDown css. I changed the div#exportDivContent to div#dropDown and it hides the two . Is that you are trying to do?
<ul>
<li id="exportWrapper">
<button onclick="return false" id="triggerDropDown">trigger </button>
<div id="dropDown">
<span class="one"> link one</span><br>
<span class="two"> link two</span>
</div>
</li>
</ul>

Answer 2

Well, I think the problem here is you setting overflow: hidden to the parent div. So, at first there is no overflow and the button is displayed properly. Then, when you click on the button, the height of it increases since there is a drop down list and hence, it shows only half of the list.
Try removing overflow: hidden [Edit] : or this:
<button onclick="a_function()" id="triggerDropDown">trigger </button>
<div id="dropDown">
<span class="one"> link one</span><br>
<span class="two"> link two</span>
</div>
<script>
function a_function(){
document.getElementById("parent").style.height = "60px";
}
</script>