force LI onto two lines

have a menu in CSS, want each LI to span two lines

[hughie]

Hi There

I currently have a menu that i've used CSS to format

The code is
<DIV id=nav1>
<ul>
<li>home</li>
<li>Goats for sale</li>
<li>fish for sale</li>
</ul>
</div>

and it's spitting out
Home - Goats for sale - etc..

What i want it to do is go

Home - Goats (new line)for sale - Fish(new line)for sale

So the menu is two lines thick.
is that possible using CSS or should i revert back to trusty tables?

Cheers,
hughie

[benihana]

youll need some more markup.

something like:

<DIV id=nav1>
<ul>
<li>home</li>
<li>Goats<span>for sale</span></li>
<li>fish <span>for sale</span></li>
</ul>

the you can add:

#nav1 li span {
display:block;
}

to your css. aletrnatively a <br> would do it...

[hughie]

Thanks for the tip, it didn't really work how i liked so i reverted back to tables on this one as i wasn't sure where.

Thanks for the help
hughie