Menu ul li line break?

I’m new to MODx (read: new to CMS in general) and I’m having trouble achieving the look I want.

Here’s the photoshop mockup I made of the template I want to create.


Notice the menu. I need to have the two-word menu items on two separate lines with a border. I’m trying to achieve this with CSS.
I tried inserting
into the menu name. The lines broke, but this happened:

.

Not sure how to proceed. Any ideas?

I did a quick test with the menu title on one of my local dev sites, and this does what you want (you could put the CSS in your .css file instead of inline)

AWESOME! You rock,
Thanks.
I had to add a "float:left" to the css and it worked beautifully, just the way I wanted it to.