Help with a css ul menu

[colinod]

i am trying to get two lines of text for 1 button on a ul css menu..

The only way i have found to get the line return to only line return the single button is to put a iv around it.

<UL id="topnav">
<LI id="boys"><a href="boys.asp?id=All">BOYS</a></LI>
<LI id="girls"><a href="girls.asp?id=All">GIRLS</a></LI>
<LI id="everyone"><a href="everyone.asp?id=All">EVERYONE</a></LI>
<LI id="kids"><a href="kids.asp?id=All">KIDS</a></LI>
<LI id="news"><a href="http://www.yaketyyak.co.uk/news/">NEWS</a></LI>
<LI id="shortlist"><a href="http://www.yaketyyak.co.uk/news/">
<div>VIEW<br />
  SHORTLIST</div></a></LI>
<LI id="talent"><a href="newtalent.asp?id=All">NEW TALENT</a></LI>
<LI id="home"><a href="http://bytes.com/submit/index.asp">HOME</a></LI>
</UL>

now i have the two line button on a seperate line instead of inline can anyone help??

#TOPNAV {
    DISPLAY: INLINE;
}
#topnav li {
    display: inline;
}