Get inline list items to overflow parent ul

Question

I have a menu which is made as a list with inline items. While rendering correctly on large screens, elements move underneath the menu when the browser window gets smaller, instead of putting them to the right of the rest of the content.

With min-width:100%; for .drop_menu I was expecting that the menu would be 100% of the screen width at minimum, but stretch to fit more menu items in the x direction if necessary.

With width:500px; for .drop_menu it works, but I didn't want to give the menu a fixed width.

The reason that I want the items to overflow in the x direction is because I was going to implement a javascript scroller so the menu would scroll when the mouse cursor gets close to the edge. I can't scroll in the x-direction if there's no x-overflow.

I've created a jsfiddle of my failing menu here: http://jsfiddle.net/j41jfjqL/3/

Answer 1

Since they are inline, use white-space:nowrap to prevent the list items from appearing on a new line.

Updated Example

.drop_menu {
    white-space:nowrap;
}
.drop_menu > li {
    white-space:normal;
}

Since you don't want this to occur on the children li elements, set the white-space property value to normal .