<p>I have a vertical menu in my system which is basically made of HTML <code>ul</code>/<code>li</code> with CSS styling (see image below). However I don't want the <code>li</code> items which are wider than the menu to wrap, I would prefer them to overflow with a horizontal scroll bar at the bottom of the menu. How can I do this in CSS?</p>

Use
```
white-space:nowrap
```
. Like so:
```
```
li {
  white-space:nowrap;
}
```
```
Here's some
documentation
.