Problem with dropdown menu getting cut off

[pealo86]

I have a dropdown menu here:

http://www.mattpealing.co.uk/concept/dropdown/dropdown.htm

 

But notice that the dropdown appears to be too big and the bottom is cut off. I assume that is because it is contained with div#header, and its overflow property is set to hidden.

 

I need the dropdowns to appear in front of the content beneath it. It seems I can manage this by removing the overflow property of div#header but then it breaks its appearance.

 

I tried adding a clearing <br> into div#header to try and make up for removing the overflow property, but that still doesn't work.

 

Does anyone know what the best way to fix it will be? Will I need to code it in a completely different way?

 

Thanks.

[haku]

Change overflow:hidden to overflow:auto. If that doesn't work, you're going to need to post either a code or a link, link is better.

[pealo86]

Thanks, I tried setting it to 'auto' but that also breaks the page, plus it makes a scrollbar appear when the dropdowns come down.

 

There's a link to it in the original post.

[haku]

So there is

 

The solution to this is going to be a little tricky. Basically, you need to move your nav outside of the #header div. Since you are already positioning the navigation absolutely, this actually isn't too big of a deal. You can put it after the #footer div. But, when this happens, you will see that your navigation stretches the entire width of the page. To fix this, you need to add position:relative to the #wrap div.

[pealo86]

Great thanks I'll give that a try 

[leitning_strike]

You could fetch the number of items in the drop down menu and dynamically calculate/set the height of the div. And if it's going under another element set the z-index high.

[fortnox007]

I would give it absolute positioning with a higher z-index than the rest, that way it just float's above your other content