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的如上內嵌出現。只要我將顯示：塊附加到跨度上，即使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你的級別s和2級li s的線路了，你怎麼想的，也許浮動的L1 li的左，使您的L2 li小號inline-block