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. Quote 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. Quote 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. Quote 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. Quote 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 Quote 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. Quote 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 Quote 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
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.