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

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