pealo86 Posted January 6, 2011 Share Posted January 6, 2011 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. Link to comment https://forums.phpfreaks.com/topic/223582-problem-with-dropdown-menu-getting-cut-off/ Share on other sites More sharing options...
haku Posted January 6, 2011 Share Posted January 6, 2011 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. Link to comment https://forums.phpfreaks.com/topic/223582-problem-with-dropdown-menu-getting-cut-off/#findComment-1155725 Share on other sites More sharing options...
pealo86 Posted January 6, 2011 Author Share Posted January 6, 2011 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. Link to comment https://forums.phpfreaks.com/topic/223582-problem-with-dropdown-menu-getting-cut-off/#findComment-1155734 Share on other sites More sharing options...
haku Posted January 7, 2011 Share Posted January 7, 2011 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. Link to comment https://forums.phpfreaks.com/topic/223582-problem-with-dropdown-menu-getting-cut-off/#findComment-1155984 Share on other sites More sharing options...
pealo86 Posted January 7, 2011 Author Share Posted January 7, 2011 Great thanks I'll give that a try Link to comment https://forums.phpfreaks.com/topic/223582-problem-with-dropdown-menu-getting-cut-off/#findComment-1156183 Share on other sites More sharing options...
leitning_strike Posted January 17, 2011 Share Posted January 17, 2011 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. Link to comment https://forums.phpfreaks.com/topic/223582-problem-with-dropdown-menu-getting-cut-off/#findComment-1160795 Share on other sites More sharing options...
fortnox007 Posted January 18, 2011 Share Posted January 18, 2011 I would give it absolute positioning with a higher z-index than the rest, that way it just float's above your other content Link to comment https://forums.phpfreaks.com/topic/223582-problem-with-dropdown-menu-getting-cut-off/#findComment-1161345 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.