Jump to content

Problem with dropdown menu getting cut off


pealo86

Recommended Posts

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.

So there is :D

 

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.

  • 2 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.