get two lines of text on UL navigation

[colinod]

i have a simple navigation with no sub menus like this

<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="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>

i want to make the new talent appear on 2 lines

css as follows

#topnav {
    /*background-color:#0C9;*/
    margin: 0 auto;
    padding: 10px;
    width: 1600px;
    text-align:center;
    left: 0px;
}
#topnav li {
    display: inline;
}
 
#girls a{
    padding: 10px;
    font-family: 'Nunito', sans-serif;
    font-weight:bold;
    font-size:34px;
    color:#999;
    text-shadow: 0px 0px 2px #999, 0px 5px 10px #999;
    filter: Shadow(Color=#999, Direction=45, Strength=2);
}
#everyone a{
    padding: 10px;
    font-family: 'Nunito', sans-serif;
    font-weight:bold;
    font-size:34px;
    color: #999;
    text-shadow: 0px 0px 2px #999, 0px 5px 10px #999;
    filter: Shadow(Color=#999, Direction=45, Strength=2);
    /*background-color:#FF9B9B;*/
}
#talent a{
    padding: 10px;
    font-family: 'Nunito', sans-serif;
    font-weight:bold;
    font-size:34px;
    color:#999;
    text-shadow: 0px 0px 2px #999, 0px 5px 10px #999;
    filter: Shadow(Color=#999, Direction=45, Strength=2);
    /*background-color:#FF9B9B;*/
}
#boys a{
    padding: 10px;
    font-family: 'Nunito', sans-serif;
    font-weight:bold;
    font-size:34px;
    color:#999;
    text-shadow: 0px 0px 2px #999, 0px 5px 10px #999;
    filter: Shadow(Color=#999, Direction=45, Strength=2);
    /*background-color:#FF9B9B;*/
}
#home a{
    padding: 10px;
    font-family: 'Nunito', sans-serif;
    font-weight:bold;
    font-size:34px;
    color:#999;
    text-shadow: 0px 0px 2px #999, 0px 5px 10px #999;
    filter: Shadow(Color=#999, Direction=45, Strength=2);
    /*background-color:#FF9B9B;*/
}
#news a{
    padding: 10px;
    font-family: 'Nunito', sans-serif;
    font-weight:bold;
    font-size:34px;
    color:#999;
    text-shadow: 0px 0px 2px #999, 0px 5px 10px #999;
    filter: Shadow(Color=#999, Direction=45, Strength=2);
    /*background-color:#FF9B9B;*/
}
#kids a{
    padding: 10px;
    font-family: 'Nunito', sans-serif;
    font-weight:bold;
    font-size:34px;
    color:#999;
    text-shadow: 0px 0px 2px #999, 0px 5px 10px #999;
    filter: Shadow(Color=#999, Direction=45, Strength=2);
    /*background-color:#FF9B9B;*/*
}

any help appreciated

[shadowstrike]

Hi

Although I can't exatly understand what you are trying to say,but based on your program,I beleive that you are trying to repeat one of the list items several times without repeating it in unordered list.

I can share a snippet.Please do have a look at it.

<p>1: <select class="repeat"></select> is a {TextField}</p>
<p>2: <select class="repeat"></select> is a {TextField}</p>
<p>3: <select class="repeat"></select> is a {TextField}​​​​​​​​​​​​​​​​​​</p>​​​​​​​​​
 
<script type="text/javascript">
    var optionOpen = "<option>";
    var optionClosed = "</option>"​​​​​​​​​​​​​​​​​;​​
    var selectItems = ["firstItem", "secondItem", "thirdItem"];
 
    $(".repeat").each(function(){
        for (key in selectItems)
        {
            $(this).append(optionOpen + selectItems[key] + optionClosed);
        }
    });
</script>