CSS, inline list with multiple lines

Question

I have a header set up like this:

    <div id="header">
    <div class="container_16">


    <div class="grid_4"><img src="content/images/logo-beta.png" /></div>

    <div class="grid_5 push_1">
    <ul id="navigation">
        <li><a class="header-link" href="#">About</a><span class="sub-navigation"><a class="sub-link" href="#">Info</a><a class="sub-link" href="#">Terms</a></span></li>
        <li><a class="header-link" href="#">Account</a><span class="sub-navigation"><a class="sub-link" href="#">Sign In</a><a class="sub-link" href="#">Sign Up</a></span></li>
        </ul>
    </div>

    <div class="grid_7 push_3">Search</div>


</div>
</div>

I am using 960 GS for my general layout. What I want to do is make my navigation look like it is tiered.

About               Account
Info, Terms         Sign In, Sign Up

Where About and Account are bold (that's easy), but I want the span of sub items to fall below the header nav items and the LI's to appear inline as above. As soon as I attach display:block to the span, even though the LI's have display:inline on them, they fall on top of one another.

Here's what I have so far for my CSS.

#navigation
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#navigation li
{
    color: #f7f3e7;
    display: inline;
}

#navigation li span.sub-navigation
{
    display:block;
}

#navigation li a 
{ 
    color: #f7f3e7;
    text-decoration: none; 
}

.header-link
{
    font-weight: bold;
}

Answer 1

Don't make your sublists spans.. make them lists too!

<ul class="main-list">
   <li class="main-list-title">Title!
     <ul class="sub-list">
       <li>Something</li>
       <li>Something</li>
       <li>Something</li>
     </ul>
   </li>
 </ul>

To expand on my answer, you should be able to do some CSS magic where you make your level 1 lis and level 2 lis line up how you want, maybe floating your l1 lis left and making your l2 lis inline-block

Answer 2

Although what Jason said is more semantic, you are almost there with your CSS, you were just missing a float:left at the right place

here is a version of you code (works in firefox) http://jsbin.com/adede3

To edit that code go to http://jsbin.com/adede3/edit