CSS, список рядный с несколькими линиями

Question

У меня есть заголовок настроить так:

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

Я использую 960 GS для моего генплану. То, что я хочу сделать, - это сделать мою навигацию похожей на многоуровневую.

About    Account 
Info, Terms   Sign In, Sign Up 

Где О и счета смелы (это легко), но я хочу Пролет подпунктов упасть ниже элементов заголовка нав литиево отображался рядным, как указано выше. Как только я прикрепляю дисплей: блок к диапазону, хотя у LI есть дисплей: встроенный на них, они падают друг на друга.

Вот что у меня есть для моего 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

Хотя то, что Джейсон сказал более семантический, вы почти там с помощью CSS, вы просто отсутствует float:left в нужном месте

здесь версия вас код (работает в Firefox) http://jsbin.com/adede3

Чтобы изменить этот код Перейти к http://jsbin.com/adede3/edit

Answer 2

Не заставляйте свои подсписные промежутки .. сделайте их списки тоже!

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

Чтобы расширить мой ответ, вы должны быть в состоянии сделать некоторые CSS магии, где вы делаете ваш 1-го уровня li с и 2-го уровня li выстраиваются, как вы хотите, может быть плавающим ваш l1 li ы влево и делает ваш l2 li s inline-block