Recently, I have been working on creating a CSS responsive main menu by combining code snippets from different sources. Despite my efforts, I encountered a major issue in the form of dropdown menu items disappearing when they extend beyond the normal height of the menu in responsive mode. Check out the demo:
Main Menu Demo
It seems like the problem might be related to overflow. I experimented with various combinations of overflow properties for different device sizes but had no luck in finding a solution. Could it actually be something else causing this? Here's the snippet of CSS that pertains to this section:
/* Overflow issue workaround - adjust height of top-level menu to display all dropdowns on mobile */
.header ul.toplevel {
overflow: hidden;
}
@media (min-width: 768px) {
.header ul.toplevel {
overflow: visible;
}
}
@media (max-width: 767px) {
.header ul.toplevel {
height: 360px; /* temporary fix */
}
.header ul.dropdown {
overflow: visible;
}
}
@media (min-width: 768px) {
.header ul {
overflow: visible;
}
}
@media (max-width: 767px) {
.dropdown ul {
overflow: visible;
}
}
/* End of overflow workaround */
By examining the source code, you'll find both CSS styling and plain HTML markup – there's no javascript involved. The current quick fix of setting a height for .header ul.toplevel on small devices is less than ideal. Any suggestions on how to address this issue more effectively?