> how can I have a
in a <li>?
That's -not- what you are doing.
You have the BR -outside- any LI context but INside UL context.
Once you start with UL, you must let the UL renderer do all layout except INside the LI contexts, until you get to not-UL context. Anything inside UL but outside LI really should not be there.
Of course BR-abuse is very common, and most general-purpose HTML renderers "must" do what you want, not what you literally say, or too many existing pages will render "funny".
A UL list is not supposed to be spaced-out. It is a very 1991 construct, reflecting typewriter and nroff formatting.
You've gussied it up with a tart-load of CSS. My question then is: why a List? Why not just a bunch of BR, with SPAN or other invisible attribute to invoke CSS stylings?
I'm of multiple minds. I respect the way your CSS re-renders the page at many different widths while retaining plausable formatting. And the automatic "button" is too-kewl. OTOH, to my eye a dumb old TABLE 99% wide could be subdivided to give similar effect in ways that any HTML-2 renderer, or eyeball code-check, could understand quickly.
