What is the secret to get a list menu to work just like the one on the JQuery Mobile docs pages?
It seems to work in every browser. If there is enough screen realestate, then you see the nav menu on the left. If there is not enough room, then it shows the menu in a "more in this section" expandable list at the bottom of the page.
Looking at the source of the page, I see the structure looks like this:
For a less snarky response (no offense watusiware!), this is called responsive design, and it is the one downside of choosing to use jquery mobile, in my opinion. This is because it complicates its use quite a bit as well as limits your ability to use some of the nicest aspects of JQM. For example, if your site uses sections that change at the same time that others don't change, you really can't use any JQM animated transitions. (notice the JQM you're referring to just uses fade transitions because of this)
Do a google search for "responsive web design using CSS media queries" and you'll see it's a big topic right now.
The short answer for your original question is that it requires custom CSS for different screen widths. This CSS is for the layout of the page. My advice: do a lot of research on this topic, and plan very carefully before you dive in. You'll find you'll have to make some hard decisions before you begin, and the CSS can quickly get unwieldy/bloated without planning and good organization.