如何使溢流y独立于溢流x运行

Question

I'm working on some CSS for a navigation bar, and I need to use a max-height and overflow-y: scroll for the dropdown in order to make sure it will fit on the page. However, whenever I set the overflow-y property to scroll, it seems to automatically enforce that overflow-x must also be set to scroll , and as a result, submenus become hidden.

See the jsfiddle below for a working example

https://jsfiddle.net/5eyveyfz/

EDIT: I should clarify the use of my fiddle. The issue arises when you hover over the menu item titled "SubMenu 1" which shows the submenu in question. The expected behavior is that this submenu is visible without a scrollbar, but instead its behaving as though overflow-x was set to scroll

Answer 1

While it is not doing this in your fiddle - is it possible the data you are populating in your actual build is forcing the table to overflow its width?

If so, change the container to overflow-x:hidden; in order to prevent the horizontal scroll bar.

Answer 2

Changing these values will show the dropdown directly below the submenu heading:

#menu > ul { 
 overflow-y:scroll;
 overflow-x:hidden;
 max-height:300px;
}

.submenu {
 position:relative;
 display: none;
 left:0; 
 top:0;
}

If you want to keep the left position you will need to make the container wider or change it to display:inline-block; without a width set for it to adjust to the size of the content.