make <ul> fit width of <li> links

Question

I have a div with overflow-x:scroll; and in that div I have a list, and that list have some links. But I don't seem to be able to make my list a wide as its links. Which results in my links jumping lines.

How would I fix this?

My html

<div class="menu">
    <ul>
        <li>
            <a href="#">a long text that jumps lines</a>
        </li>
        <li>
            <a href="#">a line that don't jump</a>
        </li>
    </ul>
</div>

My CSS

.menu{
   width:400px;
   overflow-x:scroll;
}

Answer 1

When you say Which results in my links jumping lines I guess is breaking in a new line, then you can use this property to avoid that:

.menu ul li {
   white-space:nowrap;
}

Also to make your ul get the full width change his display property:

.menu ul {
   display:inline-block;
}

The demo http://jsfiddle.net/5KSaM/7/